design: 라디오 버튼 스타일 변경

hhsung_work
HyungJune Kim 10 months ago
parent 99eb505d72
commit 5b60525279

@ -8,7 +8,7 @@
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Reources/Generic.xaml"/>
<ResourceDictionary Source="/Resources/Generic.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
</ResourceDictionary.MergedDictionaries>

@ -0,0 +1,37 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media;
namespace SmartAquaViewer.Helper
{
public static class RadioButtonHelper
{
public static readonly DependencyProperty PressedImageProperty =
DependencyProperty.RegisterAttached(
"PressedImage",
typeof(ImageSource),
typeof(RadioButtonHelper),
new PropertyMetadata(null));
public static void SetPressedImage(DependencyObject element, ImageSource value)
=> element.SetValue(PressedImageProperty, value);
public static ImageSource GetPressedImage(DependencyObject element)
=> (ImageSource)element.GetValue(PressedImageProperty);
public static readonly DependencyProperty UnPressedImageProperty =
DependencyProperty.RegisterAttached(
"UnPressedImage",
typeof(ImageSource),
typeof(RadioButtonHelper),
new PropertyMetadata(null));
public static void SetUnPressedImage(DependencyObject element, ImageSource value)
=> element.SetValue(UnPressedImageProperty, value);
public static ImageSource GetUnPressedImage(DependencyObject element)
=> (ImageSource)element.GetValue(UnPressedImageProperty);
}
}

@ -7,6 +7,7 @@
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:view="clr-namespace:SmartAquaViewer.View"
xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel"
xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
mc:Ignorable="d"
Title="MainWindow" Height="1080" Width="1920" WindowStartupLocation="CenterScreen">
@ -26,25 +27,38 @@
<Grid Grid.RowSpan="2"> <!--파일 리스트-->
<view:FileListView x:Name="fileListView"/>
</Grid>
<Grid Grid.Column="1" Background="#00498D"> <!--탭-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<RadioButton x:Name="rdbtnMonitoing" GroupName="contentSwap" Content="모니터링" Tag="monitoring"
Style="{StaticResource RadioButtonStyle}" Margin="60 0" IsChecked="True"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdbtnEnergy" GroupName="contentSwap" Content="에너지" Tag="energy"
Style="{StaticResource RadioButtonStyle}"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdBtnGreenHouseGas" GroupName="contentSwap" Content="온실가스" Tag="greenHouseGas"
Style="{StaticResource RadioButtonStyle}" Margin="60 0 0 0"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdbtnCCTV" GroupName="contentSwap" Content="CCTV" Tag="cctv"
Style="{StaticResource RadioButtonStyle}" Margin="60 0"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
</StackPanel>
<Grid Grid.Column="1"> <!--탭-->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RadioButton x:Name="rdbtnMonitoing" GroupName="contentSwap" Content="모니터링" Tag="monitoring"
Style="{StaticResource ImageRadioButtonStyle}" IsChecked="True"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdbtnEnergy" GroupName="contentSwap" Content="에너지" Tag="energy"
Style="{StaticResource ImageRadioButtonStyle}" Grid.Column="1"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdBtnGreenHouseGas" GroupName="contentSwap" Content="온실가스" Tag="greenHouseGas"
Style="{StaticResource ImageRadioButtonStyle}" Grid.Column="2"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
<RadioButton x:Name="rdbtnCCTV" GroupName="contentSwap" Content="CCTV" Tag="cctv"
Style="{StaticResource ImageRadioButtonStyle}" Grid.Column="3"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
</Grid>
<Grid Grid.Row="1" Grid.Column="1"> <!--기능 화면-->
<ContentControl x:Name="contentControl" Content="{Binding SelectedViewModel}"/>

@ -1,30 +0,0 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="#2F2F44"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="32"/>
<Setter Property="Width" Value="300"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}" CornerRadius="10"
BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="32" Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#C2C2E6"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

@ -0,0 +1,66 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:helper="clr-namespace:SmartAquaViewer.Helper">
<FontFamily x:Key="SCDream1">pack://application:,,,/Fonts/#S-Core Dream 1 Thin</FontFamily>
<FontFamily x:Key="SCDream2">pack://application:,,,/Fonts/#S-Core Dream 2 ExtraLight</FontFamily>
<FontFamily x:Key="SCDream3">pack://application:,,,/Fonts/#S-Core Dream 3 Light</FontFamily>
<FontFamily x:Key="SCDream4">pack://application:,,,/Fonts/#S-Core Dream 4 Regular</FontFamily>
<FontFamily x:Key="SCDream5">pack://application:,,,/Fonts/#S-Core Dream 5 Medium</FontFamily>
<FontFamily x:Key="SCDream6">pack://application:,,,/Fonts/#S-Core Dream 6 Bold</FontFamily>
<FontFamily x:Key="SCDream7">pack://application:,,,/Fonts/#S-Core Dream 7 ExtraBold</FontFamily>
<FontFamily x:Key="SCDream8">pack://application:,,,/Fonts/#S-Core Dream 8 Heavy</FontFamily>
<FontFamily x:Key="SCDream9">pack://application:,,,/Fonts/#S-Core Dream 9 Black</FontFamily>
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="#2F2F44"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="32"/>
<Setter Property="Width" Value="300"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}" CornerRadius="10"
BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="32" Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#C2C2E6"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ImageRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<Image x:Name="ButtonImage" Stretch="Fill"
Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helper:RadioButtonHelper.UnPressedImage)}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
TextElement.FontFamily="{StaticResource SCDream8}"
TextElement.FontSize="30"
TextElement.Foreground="{TemplateBinding Foreground}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonImage" Property="Source"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helper:RadioButtonHelper.PressedImage)}"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -10,7 +10,18 @@
</PropertyGroup>
<ItemGroup>
<None Remove="Reources\Images\ListImage.png" />
<None Remove="Fonts\SCDream1.otf" />
<None Remove="Fonts\SCDream2.otf" />
<None Remove="Fonts\SCDream3.otf" />
<None Remove="Fonts\SCDream4.otf" />
<None Remove="Fonts\SCDream5.otf" />
<None Remove="Fonts\SCDream6.otf" />
<None Remove="Fonts\SCDream7.otf" />
<None Remove="Fonts\SCDream8.otf" />
<None Remove="Fonts\SCDream9.otf" />
<None Remove="Resources\Images\ListImage.png" />
<None Remove="Resources\Images\tab_bg.png" />
<None Remove="Resources\Images\tab_bg_off.png" />
</ItemGroup>
<ItemGroup>
@ -19,7 +30,22 @@
</ItemGroup>
<ItemGroup>
<Resource Include="Reources\Images\ListImage.png" />
<Resource Include="Fonts\SCDream1.otf" />
<Resource Include="Fonts\SCDream2.otf" />
<Resource Include="Fonts\SCDream3.otf" />
<Resource Include="Fonts\SCDream4.otf" />
<Resource Include="Fonts\SCDream5.otf" />
<Resource Include="Fonts\SCDream6.otf" />
<Resource Include="Fonts\SCDream7.otf" />
<Resource Include="Fonts\SCDream8.otf" />
<Resource Include="Fonts\SCDream9.otf" />
<Resource Include="Resources\Images\ListImage.png" />
<Resource Include="Resources\Images\tab_bg.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Resource>
<Resource Include="Resources\Images\tab_bg_off.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Resource>
</ItemGroup>
</Project>

@ -5,12 +5,16 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:SmartAquaViewer.View"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<TextBlock Text="Monitoring View"
FontSize="24" FontWeight="Bold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"/>
</Grid>
d:DesignHeight="940" d:DesignWidth="1650">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
<RowDefinition Height="450"/>
</Grid.RowDefinitions>
</Grid>
</Border>
</UserControl>

Loading…
Cancel
Save