design: 리스트 박스 스타일 변경

SmartAquaViewer/App.xaml

@@ -2,20 +2,22 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:SmartAquaViewer"
+             xmlns:classes="clr-namespace:SmartAquaViewer.Classes"
              xmlns:view="clr-namespace:SmartAquaViewer.View"
              xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceDictionary Source="/Resources/Generic.xaml"/>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Secondary/MaterialDesignColor.Lime.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"/>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Badged.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Chip.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Clock.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.FlipperClassic.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ColorPicker.xaml" />
@@ -27,6 +29,7 @@
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Snackbar.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.AutoSuggestBox.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.SplitButton.xaml" />
+                <ResourceDictionary Source="/Resources/Generic.xaml"/>
             </ResourceDictionary.MergedDictionaries>
 
             <DataTemplate DataType="{x:Type vm:MonitoringViewModel}">
@@ -41,6 +44,7 @@
             <DataTemplate DataType="{x:Type vm:CCTVViewModel}">
                 <view:CCTVView/>
             </DataTemplate>
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>

SmartAquaViewer/Classes/Converter.cs

@@ -4,6 +4,7 @@ using System.Globalization;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows;
 using System.Windows.Data;
 
 namespace SmartAquaViewer.Classes
@@ -78,4 +79,32 @@ namespace SmartAquaViewer.Classes
         public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
             => throw new NotImplementedException();
     }
+
+    public class BoolToVisibilityConverter : IValueConverter
+    {
+        public bool Inverse { get; set; }
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            bool flag = false;
+
+            if (value is bool b)
+                flag = b;
+
+            if (Inverse)
+                flag = !flag;
+
+            return flag ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is Visibility visibility)
+            {
+                bool flag = visibility == Visibility.Visible;
+                return Inverse ? !flag : flag;
+            }
+            return false;
+        }
+    }
 }

SmartAquaViewer/Resources/Generic.xaml

@@ -1,11 +1,15 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:classes="clr-namespace:SmartAquaViewer.Classes"
                     xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
                     xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel"
                     xmlns:model="clr-namespace:SmartAquaViewer.Model"
                     xmlns:da="clr-namespace:SmartAquaViewer.DataAnalysis"
+                    xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
                     xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework">
 
+    <classes:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
+
     <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>
@@ -192,6 +196,8 @@
     <Style x:Key="TrapezoidButtonStyle" TargetType="Button">
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Width" Value="92"/>
+        <Setter Property="Height" Value="30"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
@@ -203,7 +209,7 @@
                               (0,50)    (140,50) -->
                         <Polygon x:Name="shape"
                                  Fill="#1D3649"
-                                 Points="20,0 120,0 140,50 0,50" />
+                                 Points="85.6111,0 92,30 0,30 6.38889,0" />
 
                         <!-- 내용 -->
                         <ContentPresenter HorizontalAlignment="Center"
@@ -301,4 +307,118 @@
         <Setter Property="HorizontalAlignment" Value="Center"/>
     </Style>
 
+    <Style x:Key="PageCommandButtonStyle"
+       TargetType="Button"
+       BasedOn="{StaticResource MaterialDesignFlatLightBgButton}">
+
+        <!-- 기본 속성 재정의 -->
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="Width" Value="20"/>
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="Opacity" Value="1"/>
+    </Style>
+
+    <Style TargetType="ListBoxItem" x:Key="TransparentListBoxItemStyle" BasedOn="{StaticResource MaterialDesignListBoxItem}">
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="HorizontalContentAlignment" Value="Left"/>
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ListBoxItem">
+                    <Border Background="Transparent">
+                        <ContentPresenter/>
+                    </Border>
+
+                    <ControlTemplate.Triggers>
+                        <!-- Hover 배경 제거 -->
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="Background" Value="Transparent"/>
+                        </Trigger>
+
+                        <!-- 선택 배경 제거 -->
+                        <Trigger Property="IsSelected" Value="True">
+                            <Setter Property="Background" Value="Transparent"/>
+                        </Trigger>
+
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Opacity" Value="0.6"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="SquareCheckToggleButtonStyle" TargetType="ToggleButton">
+        <!-- 기본 값들 -->
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="Foreground" Value="#808890"/>
+        <!-- 기본 숫자색: 회색 -->
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ToggleButton">
+                    <StackPanel Orientation="Horizontal"
+                            VerticalAlignment="Center">
+
+                        <!-- 네모 체크박스 부분 -->
+                        <Border x:Name="CheckBoxBorder"
+                            Width="18"
+                            Height="18"
+                            Margin="0,0,4,0"
+                            Background="Transparent"
+                            BorderBrush="#294A63"
+                            BorderThickness="1.5">
+
+                            <!-- 체크 표시 -->
+                            <Path x:Name="CheckMark"
+                              Stroke="White"
+                              StrokeThickness="2"
+                              Data="M3,9 L7,13 L14,4"
+                              Stretch="Uniform"
+                              SnapsToDevicePixels="True"
+                              Visibility="Collapsed"/>
+                        </Border>
+
+                        <!-- 숫자(컨텐츠) -->
+                        <ContentPresenter x:Name="contentPresenter"
+                                      VerticalAlignment="Center"
+                                      TextElement.Foreground="{TemplateBinding Foreground}"/>
+                    </StackPanel>
+
+                    <ControlTemplate.Triggers>
+                        <!-- 체크 되었을 때 -->
+                        <Trigger Property="IsChecked" Value="True">
+                            <Setter TargetName="CheckBoxBorder"
+                                Property="Background"
+                                Value="#28567A"/>
+                            <!-- 파란 배경 -->
+                            <Setter TargetName="CheckBoxBorder"
+                                Property="BorderBrush"
+                                Value="#28567A"/>
+                            <Setter TargetName="CheckMark"
+                                Property="Visibility"
+                                Value="Visible"/>
+                            <Setter Property="Foreground" Value="White"/>
+                            <!-- 숫자 흰색 -->
+                        </Trigger>
+
+                        <!-- 마우스 오버 효과 약간 -->
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="CheckBoxBorder"
+                                Property="BorderBrush"
+                                Value="#3A6C90"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>

SmartAquaViewer/View/MonitoringView.xaml

@@ -22,12 +22,12 @@
 
     <Border>
         <md:DrawerHost BottomDrawerBackground="Transparent" IsBottomDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
+            <Border BorderBrush="#1D3649" BorderThickness="0 0 0 2">
                 <Grid Background="Transparent">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="80"/>
                         <RowDefinition Height="*"/>
-                    <RowDefinition Height="40"/>
+                        <RowDefinition Height="60"/>
-                    <RowDefinition Height="40"/>
                     </Grid.RowDefinitions>
                     <Grid Margin="0 0 0 12">
                         <!--<Grid.Background>
@@ -357,10 +357,12 @@
                         </Grid.Style>
 
                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
-                        <Button Command="{Binding TanksPager.FirstPageCommand}"  Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                            <Button Command="{Binding TanksPager.FirstPageCommand}"  
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="PageFirst"/>
                             </Button>
-                        <Button Command="{Binding TanksPager.PrevPageCommand}"   Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                            <Button Command="{Binding TanksPager.PrevPageCommand}"   
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="ChevronLeft"/>
                             </Button>
 
@@ -368,14 +370,14 @@
                                           ItemsSource="{Binding PageNumbers}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Horizontal" />
+                                        <StackPanel Orientation="Horizontal" Margin="32 0"/>
                                     </ItemsPanelTemplate>
                                 </ItemsControl.ItemsPanel>
 
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate>
-                                    <Button Margin="2"
+                                        <Button Margin="6" Padding="6 0"
-                    Padding="6,2"
+                                                Width="21" Height="20"
                                                 Command="{Binding DataContext.GoToPageCommand,
                                                                   RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                                 CommandParameter="{Binding}">
@@ -387,8 +389,9 @@
                                             <Button.Style>
                                                 <Style TargetType="Button">
                                                     <Setter Property="Background" Value="Transparent" />
-                                                <Setter Property="BorderBrush" Value="Gray" />
+                                                    <Setter Property="BorderBrush" Value="#264A60" />
                                                     <Setter Property="BorderThickness" Value="1" />
+                                                    <Setter Property="Foreground" Value="#264A60"/>
 
                                                     <!-- 현재 페이지면 강조 -->
                                                     <Style.Triggers>
@@ -402,8 +405,9 @@
                                                                              RelativeSource="{RelativeSource AncestorType=ItemsControl}" />
                                                                 </MultiBinding>
                                                             </DataTrigger.Binding>
-                                                        <Setter Property="Background" Value="#FF007ACC" />
+                                                            <Setter Property="Background" Value="#325C80" />
                                                             <Setter Property="Foreground" Value="White" />
+                                                            <Setter Property="BorderThickness" Value="0" />
                                                         </DataTrigger>
                                                     </Style.Triggers>
                                                 </Style>
@@ -414,11 +418,11 @@
                             </ItemsControl>
 
                             <Button Command="{Binding TanksPager.NextPageCommand}"   
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="ChevronRight"/>
                             </Button>
                             <Button Command="{Binding TanksPager.LastPageCommand}"   
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="PageLast"/>
                             </Button>
                         </StackPanel>
@@ -439,25 +443,26 @@
 
                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                             <Button Command="{Binding FirstPageCommand}"  
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}"
+                                    Margin="4,0">
                                 <md:PackIcon Kind="PageFirst"/>
                             </Button>
                             <Button Command="{Binding PrevPageCommand}"   
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="ChevronLeft"/>
                             </Button>
 
                             <ItemsControl ItemsSource="{Binding PageNumbers}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Horizontal" />
+                                        <StackPanel Orientation="Horizontal" Margin="32 0"/>
                                     </ItemsPanelTemplate>
                                 </ItemsControl.ItemsPanel>
 
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate>
-                                    <Button Margin="2"
+                                        <Button Margin="6" Padding="6 0"
-                                            Padding="6,2"
+                                                Width="21" Height="20"
                                                 Command="{Binding DataContext.GoToPageCommand,
                                                                   RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                                 CommandParameter="{Binding}">
@@ -467,8 +472,9 @@
                                             <Button.Style>
                                                 <Style TargetType="Button">
                                                     <Setter Property="Background" Value="Transparent" />
-                                                <Setter Property="BorderBrush" Value="Gray" />
+                                                    <Setter Property="BorderBrush" Value="#264A60" />
                                                     <Setter Property="BorderThickness" Value="1" />
+                                                    <Setter Property="Foreground" Value="#264A60"/>
 
                                                     <!-- 🔹 현재 페이지면 강조 -->
                                                     <Style.Triggers>
@@ -482,8 +488,9 @@
                                                                              RelativeSource="{RelativeSource AncestorType=ItemsControl}" />
                                                                 </MultiBinding>
                                                             </DataTrigger.Binding>
-                                                        <Setter Property="Background" Value="#FF007ACC" />
+                                                            <Setter Property="Background" Value="#325C80" />
                                                             <Setter Property="Foreground" Value="White" />
+                                                            <Setter Property="BorderThickness" Value="0" />
                                                         </DataTrigger>
                                                     </Style.Triggers>
                                                 </Style>
@@ -494,11 +501,11 @@
                             </ItemsControl>
 
                             <Button Command="{Binding NextPageCommand}"   
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="ChevronRight"/>
                             </Button>
                             <Button Command="{Binding LastPageCommand}"   
-                                Style="{StaticResource MaterialDesignFlatLightBgButton}" Margin="4,0">
+                                    Style="{StaticResource PageCommandButtonStyle}" Margin="4,0">
                                 <md:PackIcon Kind="PageLast"/>
                             </Button>
                         </StackPanel>
@@ -506,8 +513,8 @@
 
                     <Grid Grid.Row="3" VerticalAlignment="Bottom">
                         <Button Name="btnVisibilityDown" Tag="down"
-                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
+                                Style="{StaticResource TrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}">
+                                VerticalAlignment="Bottom" HorizontalAlignment="Left" 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"
@@ -516,15 +523,19 @@
                         </Button>
 
                         <Button Name="btnVisibilityUp" Tag="up"
-                            Style="{StaticResource TrapezoidButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
+                                Style="{StaticResource TrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}">
+                                VerticalAlignment="Bottom" HorizontalAlignment="Left" Visibility="{Binding BtnVisibilityUp}">
-                        
+                            <Path Data="M6.364 2.828L1.414 7.778L0 6.364L6.364 0L12.728 6.364L11.314 7.778Z"
+                                  Fill="White" Stretch="Uniform"
+                                  Width="12.728" Height="7.78"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"/>
                         </Button>
                     </Grid>
                 </Grid>
+            </Border>
             <md:DrawerHost.BottomDrawerContent>
-                <Border x:Name="BottomDrawerRoot" Height="450"
+                <Border x:Name="BottomDrawerRoot" Height="400" CornerRadius="0 4 4 4" Background="#1D3649">
-                        BorderThickness="0 3 0 0" BorderBrush="#455569">
                     <Grid>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="550"/>
@@ -585,17 +596,30 @@
                                         <TextBlock Text="수조 (복수 선택)" VerticalAlignment="Center"
                                                    FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
 
-                                        <Border CornerRadius="10" Background="White" Margin="0 5 0 10">
+                                        <Border CornerRadius="10" Margin="0 5 0 10">
                                             <ListBox ItemsSource="{Binding TankGroups}"
-                                                     DisplayMemberPath="Key"
                                                      SelectionMode="Extended"
-                                                     helper:MultiSelectBehavior.SelectedDictionary="{Binding SelectedWaterTanks, Mode=OneWay}"
+                                                     helper:MultiSelectBehavior.SelectedDictionary="{Binding SelectedWaterTanks}"
                                                      helper:MultiSelectBehavior.KeyPath="Key"
                                                      helper:MultiSelectBehavior.ValuePath="Value"
-                                                     Height="Auto" Background="White"
                                                      FontSize="16" FontWeight="Bold"
                                                      FontFamily="{StaticResource SCDream5}"
-                                                     Style="{StaticResource MaterialDesignFilterChipListBox}"/>
+                                                     Style="{StaticResource MaterialDesignChoiceChipListBox}"
+                                                     ItemContainerStyle="{StaticResource TransparentListBoxItemStyle}"
+                                                     Background="Transparent">
+
+                                                <ListBox.ItemTemplate>
+                                                    <DataTemplate>
+                                                        <ToggleButton Content="{Binding Key}"
+                                                                      Focusable="False"
+                                                                      IsChecked="{Binding IsSelected,
+                                                                                  RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
+                                                                      Style="{StaticResource SquareCheckToggleButtonStyle}"
+                                                                      Margin="0 0 20 0"/>
+                                                    </DataTemplate>
+                                                </ListBox.ItemTemplate>
+
+                                            </ListBox>
                                         </Border>
                                     </StackPanel>