design: 레이아웃 및 배경 조정

prototype
HyungJune Kim 10 months ago
parent 60349a5723
commit df682e6600

@ -9,59 +9,93 @@
xmlns:vm="clr-namespace:SmartAquaViewer.ViewModel"
xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
mc:Ignorable="d"
Title="MainWindow" Height="1080" Width="1920" WindowStartupLocation="CenterScreen">
Title="MainWindow" Height="1080" Width="1920" WindowStartupLocation="CenterScreen" Style="{StaticResource WindowChromeStyle}">
<Window.DataContext>
<vm:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.Background>
<ImageBrush ImageSource="./Resources/Images/background.png"></ImageBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2"> <!--파일 리스트-->
<view:FileListView x:Name="fileListView"/>
<Border Grid.ColumnSpan="2">
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" Opacity="0.61">
<GradientStop Color="#394861" Offset="0.0"/>
<GradientStop Color="#232839" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock x:Name="appTitle" Text="{Binding AppTitle}" FontFamily="{StaticResource SCDream6}"
Margin="20 0 0 0" Foreground="White"
VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Style="{StaticResource WindowChromeButtonStyle}" x:Name="windowMin" Content="━" Click="WindowMin_Click" FontSize="14" FontWeight="Bold"></Button>
<Button Style="{StaticResource WindowChromeButtonStyle}" x:Name="windowMax" Click="WindowMax_Click">
<StackPanel Orientation="Vertical">
<Image Source="./Resources/Images/max.png" Margin="12 10"></Image>
</StackPanel>
</Button>
<Button Style="{StaticResource WindowChromeButtonStyle}" x:Name="windowNormal" Click="WindowNormal_Click" Visibility="Collapsed">
<StackPanel Orientation="Vertical">
<Image Source="./Resources/Images/normal.png" Margin="12 10 12 5"></Image>
</StackPanel>
</Button>
<Button Style="{StaticResource WindowChromeButtonStyle}" x:Name="windowClose" Content="X" Click="WindowClose_Click" FontSize="14"></Button>
</StackPanel>
</Grid>
<Grid Grid.Column="1"> <!--탭-->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Border>
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2"
Background="#1E2241"/>
<Border Grid.Row="1" Grid.RowSpan="2" Margin="10"
BorderBrush="#2d374c" BorderThickness="2"> <!--파일 리스트-->
<view:FileListView x:Name="fileListView"/>
</Border>
<Border Grid.Row="1" Grid.Column="1" Margin="0 10 10 0">
<UniformGrid Columns="4">
<RadioButton x:Name="rdbtnMonitoing" GroupName="contentSwap" Content="모니터링" Tag="monitoring"
Style="{StaticResource ImageRadioButtonStyle}" IsChecked="True" FontSize="30"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg.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" FontSize="30"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg.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" FontSize="30"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg.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" FontSize="30"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.UnPressedImage="/Resources/Images/tab_bg_off.png"
helper:RadioButtonHelper.PressedImage="/Resources/Images/tab_bg.png"
Command="{Binding SwapViewCommand}"
CommandParameter="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
</Grid>
<Grid Grid.Row="1" Grid.Column="1"> <!--기능 화면-->
</UniformGrid>
</Border>
<Border Grid.Row="2" Grid.Column="1" Margin="0 10 10 10"
BorderBrush="#2d374c" BorderThickness="2"> <!--기능 화면-->
<ContentControl x:Name="contentControl" Content="{Binding SelectedViewModel}"/>
</Grid>
</Border>
</Grid>
</Window>

@ -22,12 +22,43 @@ namespace SmartAquaViewer
{
InitializeComponent();
Loaded += MainWindow_Loaded;
StateChanged += MainWindow_StateChanged;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
private void WindowNormal_Click(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Normal;
appTitle.Margin = new Thickness(20, 0, 0, 0);
}
private void WindowMax_Click(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Maximized;
appTitle.Margin = new Thickness(20, 5, 0, 0);
}
private void WindowMin_Click(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Minimized;
}
private void WindowClose_Click(object sender, RoutedEventArgs e)
{
Close();
}
private void MainWindow_StateChanged(object sender, EventArgs e)
{
if (WindowState == WindowState.Maximized)
{
windowNormal.Visibility = Visibility.Visible;
windowMax.Visibility = Visibility.Collapsed;
}
else if (WindowState == WindowState.Normal)
{
windowNormal.Visibility = Visibility.Collapsed;
windowMax.Visibility = Visibility.Visible;
}
}
}
}

@ -3,7 +3,8 @@
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:da="clr-namespace:SmartAquaViewer.DataAnalysis"
xmlns:shell="clr-namespace:System.Windows.Shell;assembly=PresentationFramework">
<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>
@ -15,6 +16,45 @@
<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="WindowChromeStyle" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome CaptionHeight="35"
CornerRadius="0"
GlassFrameThickness="0"
NonClientFrameEdges="None"
ResizeBorderThickness="0"
UseAeroCaptionButtons="True" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowChromeButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000000"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="#00000000"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E8582B"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#D58C3A"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="#2F2F44"/>
<Setter Property="Foreground" Value="White"/>
@ -42,7 +82,7 @@
</Style>
<Style x:Key="ImageRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
@ -59,7 +99,7 @@
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonImage" Property="Source"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helper:RadioButtonHelper.PressedImage)}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 B

@ -22,7 +22,10 @@
<None Remove="Fonts\SCDream9.otf" />
<None Remove="Resources\Images\arrow_down.png" />
<None Remove="Resources\Images\arrow_up.png" />
<None Remove="Resources\Images\background.png" />
<None Remove="Resources\Images\ListImage.png" />
<None Remove="Resources\Images\max.png" />
<None Remove="Resources\Images\normal.png" />
<None Remove="Resources\Images\SegmentedControl\select_btn_1.png" />
<None Remove="Resources\Images\SegmentedControl\select_btn_1_press.png" />
<None Remove="Resources\Images\SegmentedControl\select_btn_2.png" />
@ -68,7 +71,10 @@
<Resource Include="Fonts\SCDream9.otf" />
<Resource Include="Resources\Images\arrow_down.png" />
<Resource Include="Resources\Images\arrow_up.png" />
<Resource Include="Resources\Images\background.png" />
<Resource Include="Resources\Images\ListImage.png" />
<Resource Include="Resources\Images\max.png" />
<Resource Include="Resources\Images\normal.png" />
<Resource Include="Resources\Images\SegmentedControl\select_btn_1.png" />
<Resource Include="Resources\Images\SegmentedControl\select_btn_1_press.png" />
<Resource Include="Resources\Images\SegmentedControl\select_btn_2.png" />

@ -25,7 +25,7 @@
<ColumnDefinition Width="600"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Margin="20" BorderBrush="#3E4C60" BorderThickness="1" CornerRadius="10">
<Border Grid.ColumnSpan="2" Margin="15" BorderBrush="#3E4C60" BorderThickness="1" CornerRadius="10">
<Border.Background>
<ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/>
</Border.Background>
@ -89,7 +89,7 @@
<DataGrid Style="{StaticResource DataGridStyle}" ItemsSource="{Binding WaterQualityList}" Background="Transparent"
RowStyle="{StaticResource DataGridRowStyle}" ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"
Grid.Row="1" Grid.RowSpan="2" Margin="20 0 20 20"
Grid.Row="1" Grid.RowSpan="2" Margin="15 0 15 15"
HorizontalAlignment="Stretch" ColumnWidth="*">
<DataGrid.Columns>
<DataGridTextColumn
@ -125,7 +125,7 @@
</DataGrid.Columns>
</DataGrid>
<Border Grid.Row="1" Grid.Column="1" Margin="0 0 20 20" CornerRadius="10"
<Border Grid.Row="1" Grid.Column="1" Margin="0 0 15 15" CornerRadius="10"
Background="#384659" BorderBrush="#404F63" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
@ -323,7 +323,7 @@
</Grid>
</Border>
<Border Grid.Row="2" Grid.Column="1" Margin="0 0 20 20" CornerRadius="10"
<Border Grid.Row="2" Grid.Column="1" Margin="0 0 15 15" CornerRadius="10"
Background="#384659" BorderBrush="#404F63" BorderThickness="1">
<control:GraphControl x:Name="graphControl"
Margin="10" DataContext="{Binding GraphControlVM}"

@ -22,12 +22,13 @@
<!-- File List Row -->
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Image Source="/Reources/Images/ListImage.png"
<Image Source="/Resources/Images/ListImage.png"
Width="35" Margin="20 0"/>
<TextBlock Text="파일 목록"
FontSize="20" FontWeight="Bold" Foreground="White"
VerticalAlignment="Center"/>
<Button Width="35" Height="35" Margin="50 0"
<Button Width="40" Height="40"
Margin="30 0" Padding="0"
Background="#ffd663"
Command="{Binding OpenFileDialogCommand}">
<materialDesign:PackIcon Kind="FolderAdd"/>

@ -25,7 +25,7 @@
<ColumnDefinition Width="600"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Margin="20" BorderBrush="#3E4C60" BorderThickness="1" CornerRadius="10">
<Border Grid.ColumnSpan="2" Margin="15" BorderBrush="#3E4C60" BorderThickness="1" CornerRadius="10">
<Border.Background>
<ImageBrush ImageSource="/Resources/Images/top_bg.png" Stretch="Fill"/>
</Border.Background>
@ -90,7 +90,7 @@
<DataGrid Style="{StaticResource DataGridStyle}" Background="Transparent" ItemsSource="{Binding WaterQualityList}"
RowStyle="{StaticResource DataGridRowStyle}" ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"
ColumnWidth="*" HorizontalAlignment="Stretch"
Grid.Row="1" Grid.RowSpan="2" Margin="20 0 20 20">
Grid.Row="1" Grid.RowSpan="2" Margin="15 0 15 15">
<DataGrid.Columns>
<DataGridTextColumn
Header="시간"
@ -125,7 +125,7 @@
</DataGrid.Columns>
</DataGrid>
<Border Grid.Row="1" Grid.Column="1" Margin="0 0 20 20" CornerRadius="10"
<Border Grid.Row="1" Grid.Column="1" Margin="0 0 15 15" CornerRadius="10"
Background="#384659" BorderBrush="#404F63" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
@ -320,7 +320,7 @@
</Grid>
</Border>
<Border Grid.Row="2" Grid.Column="1" Margin="0 0 20 20" CornerRadius="10"
<Border Grid.Row="2" Grid.Column="1" Margin="0 0 15 15" CornerRadius="10"
Background="#384659" BorderBrush="#404F63" BorderThickness="1">
<control:GraphControl x:Name="graphControl"
Margin="10" DataContext="{Binding GraphControlVM}"

@ -16,6 +16,20 @@ namespace SmartAquaViewer.ViewModel
{
public class MainViewModel : INotifyPropertyChanged
{
private string _appTitle;
public string AppTitle
{
get => _appTitle;
set
{
if (_appTitle != value)
{
_appTitle = value;
OnPropertyChanged(nameof(AppTitle));
}
}
}
private object? _selectedViewModel;
public object? SelectedViewModel
{
@ -34,6 +48,8 @@ namespace SmartAquaViewer.ViewModel
public MainViewModel()
{
AppTitle = "스마트양식 수처리시스템 운용 및 성능예측 소프트웨어 개발";
SwapViewCommand = new RelayCommand(SwapView);
SelectedViewModel = new MonitoringViewModel(); // Default view

Loading…
Cancel
Save