SmartAquafarm
/
SmartAquaViewer
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design: Segmented 컨트롤 디자인 변경

Browse Source
prototype
HyungJune Kim 7 months ago
parent 5b71d4e297
commit edb92f3191
4 changed files with 97 additions and 33 deletions
Show Stats Download Patch File Download Diff File

34
SmartAquaViewer/Controls/SegmentedControl.xaml
Unescape View File

@ -7,25 +7,17 @@
xmlns:helper="clr-namespace:SmartAquaViewer.Helper" xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
mc:Ignorable="d" mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"> 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"
<RadioButton Name="rdbtnA" Content="수조" GroupName="SignalType" Tag="Tank" Checked="RadioButton_Checked"
Checked="RadioButton_Checked" Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56" IsChecked="True"/>
Style="{StaticResource ImageRadioButtonStyle}" Width="250" Height="50" IsChecked="True" <RadioButton Name="rdbtnB" Content="여과시스템" GroupName="SignalType" Tag="Filter"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/SegmentedControl/select_btn_1.png" Checked="RadioButton_Checked"
helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_1_press.png"/> Style="{StaticResource RadioButtonSegmentedStyle}" Width="249" Height="56"/>
<RadioButton Name="rdbtnB" Content="여과시스템" GroupName="SignalType" Tag="Filter" <RadioButton Name="rdbtnC" Content="살균시스템" GroupName="SignalType" Tag="Sterilizer"
Checked="RadioButton_Checked" 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" </StackPanel>
helper:RadioButtonHelper.PressedImage="/Resources/Images/SegmentedControl/select_btn_2_press.png"/> </Border>
<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>
</UserControl> </UserControl>

2
SmartAquaViewer/MainWindow.xaml
Unescape View File

@ -85,6 +85,6 @@
</Border> </Border>
<ContentControl x:Name="contentControl" Content="{Binding SelectedViewModel}" <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> </Grid>
</Window> </Window>

66
SmartAquaViewer/Resources/Generic.xaml
Unescape View File

@ -107,6 +107,32 @@
</Setter> </Setter>
</Style> </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"> <Style x:Key="RadioButtonTabStyle" TargetType="RadioButton">
<Setter Property="Foreground" Value="#999"/> <Setter Property="Foreground" Value="#999"/>
<Setter Property="FontSize" Value="26"/> <Setter Property="FontSize" Value="26"/>
@ -163,6 +189,46 @@
</Setter> </Setter>
</Style> </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"> <Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="BorderBrush" Value="#404F63"/> <Setter Property="BorderBrush" Value="#404F63"/>
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>

28
SmartAquaViewer/View/MonitoringView.xaml
Unescape View File

@ -20,20 +20,20 @@
<classes:CurrentPageEqualsConverter x:Key="CurrentPageEqualsConverter"/> <classes:CurrentPageEqualsConverter x:Key="CurrentPageEqualsConverter"/>
</UserControl.Resources> </UserControl.Resources>
<Border BorderBrush="#2d374c" BorderThickness="2"> <Border>
<md:DrawerHost BottomDrawerBackground="Transparent" IsBottomDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard"> <md:DrawerHost BottomDrawerBackground="Transparent" IsBottomDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
<Grid Background="Transparent"> <Grid Background="Transparent">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="70"/> <RowDefinition Height="80"/>
<RowDefinition Height="*"/> <RowDefinition Height="*"/>
<RowDefinition Height="40"/> <RowDefinition Height="40"/>
<RowDefinition Height="40"/> <RowDefinition Height="40"/>
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid> <Grid Margin="0 0 0 12">
<!--<Grid.Background> <!--<Grid.Background>
<ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/> <ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/>
</Grid.Background>--> </Grid.Background>-->
<control:SegmentedControl x:Name="segmentedControl" Margin="15 10" <control:SegmentedControl x:Name="segmentedControl" HorizontalAlignment="Left"
SelectedTab="{Binding SelectedTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> SelectedTab="{Binding SelectedTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Grid> </Grid>
@ -505,15 +505,21 @@
</Grid> </Grid>
<Grid Grid.Row="3" VerticalAlignment="Bottom"> <Grid Grid.Row="3" VerticalAlignment="Bottom">
<Button Name="btnVisibilityDown" Tag="down" <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" <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>
</Grid> </Grid>
<md:DrawerHost.BottomDrawerContent> <md:DrawerHost.BottomDrawerContent>

Write Preview
Loading…
Cancel
Save