fix: 그래프 화면 열고닫기 기능 MaterialDesign Drawer 방식 적용

SmartAquaViewer/SmartAquaViewer.csproj

@@ -30,6 +30,7 @@
   <ItemGroup>
     <PackageReference Include="MaterialDesignColors" Version="5.2.1" />
     <PackageReference Include="MaterialDesignThemes" Version="5.2.1" />
+    <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
   </ItemGroup>
 
   <ItemGroup>

SmartAquaViewer/View/MonitoringView.xaml

@@ -5,39 +5,39 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:SmartAquaViewer.View"
              xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
+             xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
              mc:Ignorable="d" 
              d:DesignHeight="940" d:DesignWidth="1650">
     <Border>
-        <Grid>
+        <md:DrawerHost BottomDrawerBackground="#122136" IsBottomDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
+            <Grid Background="#243851">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="70"/>
                     <RowDefinition Height="*"/>
-                <RowDefinition x:Name="rdGraph" Height="450"/>
                 </Grid.RowDefinitions>
-
                 <Grid>
                     <Grid.Background>
                         <ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/>
                     </Grid.Background>
                 </Grid>
 
-            <Border Grid.Row="1" Background="#243851" BorderThickness="0 0 0 3" BorderBrush="#455569">
+                <Grid Grid.Row="1" VerticalAlignment="Bottom">
-                <Grid>
+                    <Button Name="btnVisibilityDown" Tag="down" 
-                    <Button Name="btnVisibilityDown" Tag="down" Click="btnVisibility_Click"
+                            Style="{StaticResource ImageButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            Style="{StaticResource ImageButtonStyle}" Height="33"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityDown}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center"
                             helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_down.png"/>
 
-                    <Button Name="btnVisibilityUp" Tag="up" Click="btnVisibility_Click"
+                    <Button Name="btnVisibilityUp" Tag="up"
-                            Style="{StaticResource ImageButtonStyle}" Height="33"
+                            Style="{StaticResource ImageButtonStyle}" Height="33" Command="{Binding ChangeDrawerStatusCommand}"
-                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="Collapsed"
+                            VerticalAlignment="Bottom" HorizontalAlignment="Center" Visibility="{Binding BtnVisibilityUp}"
                             helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_up.png"/>
                 </Grid>
-            </Border>
-
-            <Grid Grid.Row="2" Background="#122136">
-                
-            </Grid>
             </Grid>
+            <md:DrawerHost.BottomDrawerContent>
+                <Border Height="450" BorderThickness="0 3 0 0" BorderBrush="#455569">
+                    
+                </Border>
+            </md:DrawerHost.BottomDrawerContent>
+        </md:DrawerHost>
     </Border>
 </UserControl>

SmartAquaViewer/View/MonitoringView.xaml.cs

@@ -54,23 +54,23 @@ namespace SmartAquaViewer.View
 
         private void ApplyState()
         {
-            switch (_state)
+            //switch (_state)
-            {
+            //{
-                case PanelState.Hidden:
+            //    case PanelState.Hidden:
-                    rdGraph.Height = new GridLength(0, GridUnitType.Pixel);
+            //        rdGraph.Height = new GridLength(0, GridUnitType.Pixel);
-                    btnVisibilityDown.Visibility = Visibility.Collapsed;
+            //        btnVisibilityDown.Visibility = Visibility.Collapsed;
-                    btnVisibilityUp.Visibility = Visibility.Visible;
+            //        btnVisibilityUp.Visibility = Visibility.Visible;
-                    break;
-                case PanelState.Normal:
-                    rdGraph.Height = new GridLength(450, GridUnitType.Pixel);
-                    btnVisibilityDown.Visibility = Visibility.Visible;
-                    btnVisibilityUp.Visibility = Visibility.Collapsed;
-                    break;
-                //case PanelState.Expanded:
-                //    this.Visibility = Visibility.Visible;
-                //    this.Height = 400; // Expanded height
             //        break;
-            }
+            //    case PanelState.Normal:
+            //        rdGraph.Height = new GridLength(450, GridUnitType.Pixel);
+            //        btnVisibilityDown.Visibility = Visibility.Visible;
+            //        btnVisibilityUp.Visibility = Visibility.Collapsed;
+            //        break;
+            //    //case PanelState.Expanded:
+            //    //    this.Visibility = Visibility.Visible;
+            //    //    this.Height = 400; // Expanded height
+            //    //    break;
+            //}
         }
     }
 }

SmartAquaViewer/ViewModel/MonitoringViewModel.cs

@@ -5,14 +5,67 @@ using System.Linq;
 using System.Runtime.CompilerServices;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Input;
+using SmartAquaViewer.Controls;
 
 namespace SmartAquaViewer.ViewModel
 {
     public class MonitoringViewModel : INotifyPropertyChanged
     {
+        private bool _isOpenMode;
+        public bool IsOpenMode
+        {
+            get => _isOpenMode;
+            set
+            {
+                if (_isOpenMode != value)
+                {
+                    _isOpenMode = value;
+                    OnPropertyChanged();
+
+                    BtnVisibilityDown = _isOpenMode ? Visibility.Visible : Visibility.Collapsed;
+                    BtnVisibilityUp = _isOpenMode ? Visibility.Collapsed : Visibility.Visible;
+                }
+            }
+        }
+
+        private Visibility _btnVisibilityDown;
+        public Visibility BtnVisibilityDown
+        {
+            get => _btnVisibilityDown;
+            set
+            {
+                if (_btnVisibilityDown != value)
+                {
+                    _btnVisibilityDown = value;
+                    OnPropertyChanged();
+                }
+            }
+        }
+
+        private Visibility _btnVisibilityUp;
+        public Visibility BtnVisibilityUp
+        {
+            get => _btnVisibilityUp;
+            set
+            {
+                if (_btnVisibilityUp != value)
+                {
+                    _btnVisibilityUp = value;
+                    OnPropertyChanged();
+                }
+            }
+        }
+
+        public ICommand ChangeDrawerStatusCommand { get; }
+
         public MonitoringViewModel()
         {
-            // Initialization logic for MonitoringViewModel can go here
+            IsOpenMode = true;
+            BtnVisibilityUp = Visibility.Collapsed;
+
+            ChangeDrawerStatusCommand = new RelayCommand(_ => IsOpenMode = !IsOpenMode);
         }
 
         public event PropertyChangedEventHandler? PropertyChanged;