From 0edb2c98647497ebadbac71b2704c63ca539525b Mon Sep 17 00:00:00 2001
From: hj615 <hj615@cuuva.com>
Date: Thu, 14 Aug 2025 15:11:26 +0900
Subject: [PATCH] =?UTF-8?q?desgin:=20DataGrid=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SmartAquaViewer/Resources/Generic.xaml   | 20 +++++
 SmartAquaViewer/View/MonitoringView.xaml | 99 +++++++++++++++---------
 2 files changed, 83 insertions(+), 36 deletions(-)

diff --git a/SmartAquaViewer/Resources/Generic.xaml b/SmartAquaViewer/Resources/Generic.xaml
index 3b5e037..05f7c9e 100644
--- a/SmartAquaViewer/Resources/Generic.xaml
+++ b/SmartAquaViewer/Resources/Generic.xaml
@@ -115,6 +115,26 @@
         <Setter Property="AutoGenerateColumns" Value="False"/>
         <Setter Property="IsReadOnly" Value="True"/>
         <Setter Property="CanUserAddRows" Value="False"/>
+        <Setter Property="VerticalAlignment" Value="Stretch"/>
+    </Style>
+
+    <Style x:Key="DataGridRowStyle" TargetType="{x:Type DataGridRow}">
+        <Setter Property="Background" Value="#242424"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+    </Style>
+    <Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
+        <Setter Property="Background" Value="#1F1F1F"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="BorderBrush" Value="White"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="FontWeight" Value="Bold"/>
+        <Setter Property="Padding" Value="8 0"/>
+    </Style>
+    <Style x:Key="DataGridElmenetStyle" TargetType="{x:Type TextBlock}">
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
     </Style>
 
 </ResourceDictionary>
\ No newline at end of file
diff --git a/SmartAquaViewer/View/MonitoringView.xaml b/SmartAquaViewer/View/MonitoringView.xaml
index 61878f4..14a4744 100644
--- a/SmartAquaViewer/View/MonitoringView.xaml
+++ b/SmartAquaViewer/View/MonitoringView.xaml
@@ -26,39 +26,44 @@
 
                 <ScrollViewer x:Name="svTanks" Grid.Row="1" Margin="20 20 20 40" 
                               HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
-                              HorizontalAlignment="Center" Visibility="Collapsed">
+                              HorizontalAlignment="Center">
                     <ItemsControl ItemsSource="{Binding TankGroups}">
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                                <StackPanel Orientation="Horizontal"/>
+                                <UniformGrid Columns="3"/>
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
 
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <StackPanel Margin="25 0" HorizontalAlignment="Center" >
-                                    <!-- 그룹 헤더: 수조 번호 -->
+                                <StackPanel Margin="20 0" HorizontalAlignment="Center" >
                                     <TextBlock Text="{Binding Key, StringFormat=수조 {0}}"
                                                FontSize="20" FontWeight="Bold" Foreground="White"
                                                Margin="0 0 0 10"/>
 
                                     <!-- Value(= ObservableCollection<WaterQualityVO>)로 DataGrid -->
                                     <DataGrid ItemsSource="{Binding Value}"
-                                              Style="{StaticResource DataGridStyle}">
-
+                                              Style="{StaticResource DataGridStyle}"
+                                              RowStyle="{StaticResource DataGridRowStyle}"
+                                              ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
                                         <DataGrid.Columns>
                                             <!-- 측정 시각 -->
                                             <DataGridTextColumn 
                                                 Header="시간"
-                                                Binding="{Binding RecordedTime, StringFormat=\{0:yyyy-MM-dd HH:mm:ss\}}"/>
+                                                Binding="{Binding RecordedTime, StringFormat=\{0:HH:mm:ss\}}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
 
                                             <!-- Tank 값들 -->
-                                            <DataGridTextColumn Header="수조" Binding="{Binding Tank.Number}"/>
-                                            <DataGridTextColumn Header="DO" Binding="{Binding Tank.DOValue, StringFormat=\{0:F2\}}"/>
-                                            <DataGridTextColumn Header="pH" Binding="{Binding Tank.PH, StringFormat=\{0:F2\}}"/>
-                                            <DataGridTextColumn Header="ORP" Binding="{Binding Tank.ORP, StringFormat=\{0:F0\}}"/>
-                                            <DataGridTextColumn Header="온도(℃)" Binding="{Binding Tank.Temperature, StringFormat=\{0:F1\}}"/>
-                                            <DataGridTextColumn Header="유량(m³/s)" Binding="{Binding Tank.FlowRate, StringFormat=\{0:F2\}}"/>
+                                            <DataGridTextColumn Header="DO(mg/L)" Binding="{Binding Tank.DOValue, StringFormat=\{0:F2\}}"
+                                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                                            <DataGridTextColumn Header="pH" Binding="{Binding Tank.PH, StringFormat=\{0:F2\}}"
+                                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                                            <DataGridTextColumn Header="ORP(mV)" Binding="{Binding Tank.ORP, StringFormat=\{0:F0\}}"
+                                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                                            <DataGridTextColumn Header="온도(℃)" Binding="{Binding Tank.Temperature, StringFormat=\{0:F1\}}"
+                                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                                            <DataGridTextColumn Header="유량(m³/s)" Binding="{Binding Tank.FlowRate, StringFormat=\{0:F2\}}"
+                                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
                                         </DataGrid.Columns>
                                     </DataGrid>
                                 </StackPanel>
@@ -70,43 +75,65 @@
                 <ScrollViewer x:Name="svFilter" Grid.Row="1" Margin="20 20 20 40" 
                               HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
                               HorizontalAlignment="Center" Visibility="Collapsed">
-                    <DataGrid ItemsSource="{Binding WaterQualityList}" Style="{StaticResource DataGridStyle}">
+                    <DataGrid ItemsSource="{Binding WaterQualityList}" Style="{StaticResource DataGridStyle}"
+                              RowStyle="{StaticResource DataGridRowStyle}" ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
                         <DataGrid.Columns>
                             <DataGridTextColumn 
                                 Header="시간"
-                                Binding="{Binding RecordedTime, StringFormat=\{0:yyyy-MM-dd HH:mm:ss\}}"/>
+                                Binding="{Binding RecordedTime, StringFormat=\{0:HH:mm:ss\}}"
+                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
 
-                            <DataGridTextColumn Header="모래여과기 전원" Binding="{Binding Filtering.SandFilterPower}"/>
-                            <DataGridTextColumn Header="섬프탱크 pH" Binding="{Binding Filtering.SumpPH}"/>
-                            <DataGridTextColumn Header="섬프탱크 ORP(mV)" Binding="{Binding Filtering.SumpORP, StringFormat=\{0:F2\}}"/>
-                            <DataGridTextColumn Header="섬프탱크 수위(m)" Binding="{Binding Filtering.SumpWaterLevel, StringFormat=\{0:F0\}}"/>
-                            <DataGridTextColumn Header="섬프탱크 유량(m³/s)" Binding="{Binding Filtering.SumpFlowRate, StringFormat=\{0:F1\}}"/>
-                            <DataGridTextColumn Header="섬프탱크 수온(°C)" Binding="{Binding Filtering.SumpTemperature, StringFormat=\{0:F2\}}"/>
-                            <DataGridTextColumn Header="섬프탱크 전원" Binding="{Binding Filtering.CirculationPumpPower}"/>
-                            <DataGridTextColumn Header="인버터 제어기 상태" Binding="{Binding Filtering.InverterControllerStatus}"/>
-                            <DataGridTextColumn Header="순환펌프 유량(m³/s)" Binding="{Binding Filtering.FlowRate, StringFormat=\{0:F2\}}"/>
-                            <DataGridTextColumn Header="히트펌프 전원" Binding="{Binding Filtering.HeatPumpPower}"/>
-                            <DataGridTextColumn Header="히트펌프 온도(°C)" Binding="{Binding Filtering.HeatPumpTemperature, StringFormat=\{0:F2\}}"/>
-                            <DataGridTextColumn Header="에어브로와 전원" Binding="{Binding Filtering.AirBlowerPower}"/>
+                            <DataGridTextColumn Header="모래여과기 전원" Binding="{Binding Filtering.SandFilterPower}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="섬프탱크 pH" Binding="{Binding Filtering.SumpPH}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="섬프탱크 ORP(mV)" Binding="{Binding Filtering.SumpORP, StringFormat=\{0:F2\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="섬프탱크 수위(m)" Binding="{Binding Filtering.SumpWaterLevel, StringFormat=\{0:F0\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="섬프탱크 유량(m³/s)" Binding="{Binding Filtering.SumpFlowRate, StringFormat=\{0:F1\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="섬프탱크 수온(°C)" Binding="{Binding Filtering.SumpTemperature, StringFormat=\{0:F2\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="순환펌프 전원" Binding="{Binding Filtering.CirculationPumpPower}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="인버터 제어기 상태" Binding="{Binding Filtering.InverterControllerStatus}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="순환펌프 유량(m³/s)" Binding="{Binding Filtering.FlowRate, StringFormat=\{0:F2\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="히트펌프 전원" Binding="{Binding Filtering.HeatPumpPower}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="히트펌프 온도(°C)" Binding="{Binding Filtering.HeatPumpTemperature, StringFormat=\{0:F2\}}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="에어브로와 전원" Binding="{Binding Filtering.AirBlowerPower}" 
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
                         </DataGrid.Columns>
                     </DataGrid>
                 </ScrollViewer>
 
                 <ScrollViewer x:Name="svSterilizer" Grid.Row="1" Margin="20 20 20 40" 
                               HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
-                              HorizontalAlignment="Center">
-                    <DataGrid ItemsSource="{Binding WaterQualityList}" Style="{StaticResource DataGridStyle}">
+                              HorizontalAlignment="Center" Visibility="Collapsed">
+                    <DataGrid ItemsSource="{Binding WaterQualityList}" Style="{StaticResource DataGridStyle}"
+                              RowStyle="{StaticResource DataGridRowStyle}" ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
                         <DataGrid.Columns>
                             <DataGridTextColumn 
                                 Header="시간"
-                                Binding="{Binding RecordedTime, StringFormat=\{0:yyyy-MM-dd HH:mm:ss\}}"/>
+                                Binding="{Binding RecordedTime, StringFormat=\{0:HH:mm:ss\}}"
+                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
 
-                            <DataGridTextColumn Header="오존 발생기 전원" Binding="{Binding Sterilizing.OzoneGeneratorPower}"/>
-                            <DataGridTextColumn Header="자외선 살균기 ID" Binding="{Binding Sterilizing.UVSterilizerId}"/>
-                            <DataGridTextColumn Header="자외선 살균기 전원" Binding="{Binding Sterilizing.UVSterilizerPower}"/>
-                            <DataGridTextColumn Header="오존용해장치 전원" Binding="{Binding Sterilizing.OzoneDissolverPower}"/>
-                            <DataGridTextColumn Header="오존용해장치 압력(kPa)" Binding="{Binding Sterilizing.OzoneDissolverPressure, StringFormat=\{0:F1\}}"/>
-                            <DataGridTextColumn Header="배오존장치 전원" Binding="{Binding Sterilizing.ExcessOzoneDestroyerPower}"/>
+                            <DataGridTextColumn Header="오존 발생기 전원" Binding="{Binding Sterilizing.OzoneGeneratorPower}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="자외선 살균기 ID" Binding="{Binding Sterilizing.UVSterilizerId}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="자외선 살균기 전원" Binding="{Binding Sterilizing.UVSterilizerPower}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="오존용해장치 전원" Binding="{Binding Sterilizing.OzoneDissolverPower}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="오존용해장치 압력(kPa)" Binding="{Binding Sterilizing.OzoneDissolverPressure, StringFormat=\{0:F1\}}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
+                            <DataGridTextColumn Header="배오존장치 전원" Binding="{Binding Sterilizing.ExcessOzoneDestroyerPower}"
+                                                ElementStyle="{StaticResource DataGridElmenetStyle}"/>
                         </DataGrid.Columns>
                     </DataGrid>
                 </ScrollViewer>