design: Segmented 컨트롤 디자인 변경

SmartAquaViewer/Controls/SegmentedControl.xaml

@@ -7,25 +7,17 @@
              xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
+    <Border Background="#1D3649" CornerRadius="35" Width="759">
-        <Grid>
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
-            <StackPanel Orientation="Horizontal">
             <RadioButton Name="rdbtnA" Content="수조" GroupName="SignalType" Tag="Tank"
                          Checked="RadioButton_Checked"
-                             Style="{StaticResource ImageRadioButtonStyle}" Width="250" Height="50" IsChecked="True"
+                         Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56" 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"
+                          Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56"/>
-                             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"
+                          Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56"/>
-                             helper:RadioButtonHelper.UnPressedImage="/Resources/Images/SegmentedControl/select_btn_4.png"
-                             helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_4_press.png"/>
         </StackPanel>
-        </Grid>
+    </Border>
-    </Grid>
 </UserControl>

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>

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"/>

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>
 
@@ -506,14 +506,20 @@
 
                 <Grid Grid.Row="3" VerticalAlignment="Bottom">
                     <Button Name="btnVisibilityDown" Tag="down"
-                            Style="{StaticResource ImageButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
+                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}">
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_down.png"/>
+                        <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}"
+                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}">
-                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_up.png"/>
+                        
+                    </Button>
                 </Grid>
             </Grid>
             <md:DrawerHost.BottomDrawerContent>