From edb92f31913f9c32926b4ad9589421f39f52ef50 Mon Sep 17 00:00:00 2001
From: hj615 <hj615@cuuva.com>
Date: Tue, 25 Nov 2025 14:31:18 +0900
Subject: [PATCH] =?UTF-8?q?design:=20Segmented=20=EC=BB=A8=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=A4=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Controls/SegmentedControl.xaml            | 34 ++++------
 SmartAquaViewer/MainWindow.xaml               |  2 +-
 SmartAquaViewer/Resources/Generic.xaml        | 66 +++++++++++++++++++
 SmartAquaViewer/View/MonitoringView.xaml      | 28 ++++----
 4 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/SmartAquaViewer/Controls/SegmentedControl.xaml b/SmartAquaViewer/Controls/SegmentedControl.xaml
index 2a04da7..a000b1e 100644
--- a/SmartAquaViewer/Controls/SegmentedControl.xaml
+++ b/SmartAquaViewer/Controls/SegmentedControl.xaml
@@ -7,25 +7,17 @@
              xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-        <Grid>
-            <StackPanel Orientation="Horizontal">
-                <RadioButton Name="rdbtnA" Content="수조" GroupName="SignalType" Tag="Tank"
-                             Checked="RadioButton_Checked"
-                             Style="{StaticResource ImageRadioButtonStyle}" Width="250" Height="50" IsChecked="True"
-                             helper:RadioButtonHelper.UnPressedImage="/Resources/Images/SegmentedControl/select_btn_1.png"
-                             helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_1_press.png"/>
-                <RadioButton Name="rdbtnB" Content="여과시스템" GroupName="SignalType"  Tag="Filter"        
-                             Checked="RadioButton_Checked"
-                             Style="{StaticResource ImageRadioButtonStyle}" Width="250" Height="50"
-                             helper:RadioButtonHelper.UnPressedImage="/Resources/Images/SegmentedControl/select_btn_2.png"
-                             helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_2_press.png"/>
-                <RadioButton Name="rdbtnC" Content="살균시스템" GroupName="SignalType" Tag="Sterilizer"
-                             Checked="RadioButton_Checked"
-                             Style="{StaticResource ImageRadioButtonStyle}" Width="250" Height="50"
-                             helper:RadioButtonHelper.UnPressedImage="/Resources/Images/SegmentedControl/select_btn_4.png"
-                             helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_4_press.png"/>
-            </StackPanel>
-        </Grid>
-    </Grid>
+    <Border Background="#1D3649" CornerRadius="35" Width="759">
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
+            <RadioButton Name="rdbtnA" Content="수조" GroupName="SignalType" Tag="Tank"
+                         Checked="RadioButton_Checked"
+                         Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56" IsChecked="True"/>
+            <RadioButton Name="rdbtnB" Content="여과시스템" GroupName="SignalType"  Tag="Filter"        
+                          Checked="RadioButton_Checked"
+                          Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56"/>
+            <RadioButton Name="rdbtnC" Content="살균시스템" GroupName="SignalType" Tag="Sterilizer"
+                          Checked="RadioButton_Checked"
+                          Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56"/>
+        </StackPanel>
+    </Border>
 </UserControl>
diff --git a/SmartAquaViewer/MainWindow.xaml b/SmartAquaViewer/MainWindow.xaml
index ccdb48b..615c8a6 100644
--- a/SmartAquaViewer/MainWindow.xaml
+++ b/SmartAquaViewer/MainWindow.xaml
@@ -85,6 +85,6 @@
         </Border>
 
         <ContentControl x:Name="contentControl" Content="{Binding SelectedViewModel}"
-                        Grid.Row="2" Grid.Column="1" Margin="0 10 10 10"/>
+                        Grid.Row="2" Grid.Column="1" Margin="30 16 30 12"/>
     </Grid>
 </Window>
diff --git a/SmartAquaViewer/Resources/Generic.xaml b/SmartAquaViewer/Resources/Generic.xaml
index c3cd628..18947f5 100644
--- a/SmartAquaViewer/Resources/Generic.xaml
+++ b/SmartAquaViewer/Resources/Generic.xaml
@@ -107,6 +107,32 @@
         </Setter>
     </Style>
 
+    <Style x:Key="RadioButtonSegmentedStyle" TargetType="RadioButton">
+        <Setter Property="Foreground" Value="#999"/>
+        <Setter Property="FontSize" Value="20"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RadioButton">
+                    <Grid>
+                        <Border Background="{TemplateBinding Background}" CornerRadius="30">
+                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
+                                              TextElement.FontFamily="{StaticResource SCDream8}"
+                                              TextElement.FontSize="{TemplateBinding FontSize}"
+                                              TextElement.Foreground="{TemplateBinding Foreground}"/>
+                        </Border>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsChecked" Value="True">
+                            <Setter Property="Foreground" Value="White"/>
+                            <Setter Property="Background" Value="#4178BE"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style x:Key="RadioButtonTabStyle" TargetType="RadioButton">
         <Setter Property="Foreground" Value="#999"/>
         <Setter Property="FontSize" Value="26"/>
@@ -163,6 +189,46 @@
         </Setter>
     </Style>
 
+    <Style x:Key="TrapezoidButtonStyle" TargetType="Button">
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid>
+
+                        <!-- 🔷 사다리꼴(위 좁고 아래 넓음) -->
+                        <!-- (20,0)        (120,0)
+                             \              /
+                              (0,50)    (140,50) -->
+                        <Polygon x:Name="shape"
+                                 Fill="#1D3649"
+                                 Points="20,0 120,0 140,50 0,50" />
+
+                        <!-- 내용 -->
+                        <ContentPresenter HorizontalAlignment="Center"
+                                          VerticalAlignment="Center"
+                                          Margin="0"/>
+                    </Grid>
+
+                    <!-- 🔷 버튼 상태 -->
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="shape" Property="Fill" Value="#264A63"/>
+                        </Trigger>
+                        <Trigger Property="IsPressed" Value="True">
+                            <Setter TargetName="shape" Property="Fill" Value="#162938"/>
+                        </Trigger>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter TargetName="shape" Property="Fill" Value="#555"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
         <Setter Property="BorderBrush" Value="#404F63"/>
         <Setter Property="BorderThickness" Value="1"/>
diff --git a/SmartAquaViewer/View/MonitoringView.xaml b/SmartAquaViewer/View/MonitoringView.xaml
index cb9d37e..8b5cec8 100644
--- a/SmartAquaViewer/View/MonitoringView.xaml
+++ b/SmartAquaViewer/View/MonitoringView.xaml
@@ -20,20 +20,20 @@
         <classes:CurrentPageEqualsConverter x:Key="CurrentPageEqualsConverter"/>
     </UserControl.Resources>
 
-    <Border BorderBrush="#2d374c" BorderThickness="2">
+    <Border>
         <md:DrawerHost BottomDrawerBackground="Transparent" IsBottomDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
             <Grid Background="Transparent">
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="70"/>
+                    <RowDefinition Height="80"/>
                     <RowDefinition Height="*"/>
                     <RowDefinition Height="40"/>
                     <RowDefinition Height="40"/>
                 </Grid.RowDefinitions>
-                <Grid>
+                <Grid Margin="0 0 0 12">
                     <!--<Grid.Background>
                         <ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/>
                     </Grid.Background>-->
-                    <control:SegmentedControl x:Name="segmentedControl" Margin="15 10"
+                    <control:SegmentedControl x:Name="segmentedControl" HorizontalAlignment="Left"
                                               SelectedTab="{Binding SelectedTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                 </Grid>
 
@@ -505,15 +505,21 @@
                 </Grid>
 
                 <Grid Grid.Row="3" VerticalAlignment="Bottom">
-                    <Button Name="btnVisibilityDown" Tag="down" 
-                            Style="{StaticResource ImageButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}"
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_down.png"/>
+                    <Button Name="btnVisibilityDown" Tag="down"
+                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}">
+                        <Path Data="M6.364 4.94983L1.414 -0.000167768L3.54069e-07 1.41383L6.364 7.77783L12.728 1.41383L11.314 -0.000167217L6.364 4.94983Z"
+                              Fill="White" Stretch="Uniform"
+                              Width="12.728" Height="7.78"
+                              HorizontalAlignment="Center"
+                              VerticalAlignment="Center"/>
+                    </Button>
 
                     <Button Name="btnVisibilityUp" Tag="up"
-                            Style="{StaticResource ImageButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}"
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_up.png"/>
+                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}">
+                        
+                    </Button>
                 </Grid>
             </Grid>
             <md:DrawerHost.BottomDrawerContent>