SmartAquafarm
/
SmartAquaViewer
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design: CCTV 목록 디자인 적용

Browse Source
prototype
HyungJune Kim 6 months ago
parent aef0f87168
commit 1bb3465e79
7 changed files with 158 additions and 122 deletions
Show Stats Download Patch File Download Diff File

15
SmartAquaViewer/Resources/Generic.xaml
Unescape View File

@ -474,19 +474,22 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border BorderThickness="0,0,0,1" BorderBrush="Black" Background="#2d374f">
<Border BorderThickness="0,0,0,1" BorderBrush="#FFF"
Background="#1D3649"
Width="{TemplateBinding Width}" >
<TextBlock Text="{TemplateBinding Content}"
Foreground="White"
Padding="5,5,5,0"
Width="{TemplateBinding Width}"
TextAlignment="Center" />
Padding="0"
TextAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Height" Value="40"/>
</Style>
<Style x:Key="GridViewTextBlockStyle" TargetType="{x:Type TextBlock}">
@ -771,7 +774,7 @@
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
</Style>
<Style x:Key="GraphButtonStyle" TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatLightBgButton}">
<Style x:Key="GeneralButtonStyle" TargetType="Button" BasedOn="{StaticResource MaterialDesignFlatLightBgButton}">
<Setter Property="FontFamily" Value="{StaticResource SCDream3}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="16" />

BIN
SmartAquaViewer/Resources/Images/cctv.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 B

2
SmartAquaViewer/SmartAquaViewer.csproj
Unescape View File

@ -26,6 +26,7 @@
<None Remove="Resources\Images\arrow_right.png" />
<None Remove="Resources\Images\arrow_up.png" />
<None Remove="Resources\Images\background.png" />
<None Remove="Resources\Images\cctv.png" />
<None Remove="Resources\Images\file_logo.png" />
<None Remove="Resources\Images\ListImage.png" />
<None Remove="Resources\Images\max.png" />
@ -84,6 +85,7 @@
</Resource>
<Resource Include="Resources\Images\arrow_up.png" />
<Resource Include="Resources\Images\background.png" />
<Resource Include="Resources\Images\cctv.png" />
<Resource Include="Resources\Images\file_logo.png" />
<Resource Include="Resources\Images\ListImage.png" />
<Resource Include="Resources\Images\max.png" />

255
SmartAquaViewer/View/CCTVView.xaml
Unescape View File

@ -11,77 +11,110 @@
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Border >
<Border BorderBrush="#1D3649" BorderThickness="0 0 2 0">
<md:DrawerHost RightDrawerBackground="Transparent" IsRightDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
<Grid Background="Transparent">
<ItemsControl ItemsSource="{Binding PlayerVMs}" Margin="0 0 30 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid x:Name="ugrdFFPlayer" Rows="{Binding RowCount}" Columns="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:FFPlayerControl/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Border>
<Grid Background="Transparent">
<ItemsControl ItemsSource="{Binding PlayerVMs}" Margin="0 0 46 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid x:Name="ugrdFFPlayer" Rows="{Binding RowCount}" Columns="{Binding ColumnCount}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:FFPlayerControl/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Border BorderThickness="0 0 1 0" BorderBrush="#2d374c">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsOpenMode}" Value="False">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Grid HorizontalAlignment="Right">
<Button Tag="left" Margin="0"
Style="{StaticResource ImageButtonStyle}"
Width="25" Command="{Binding ChangeDrawerStatusCommand}"
VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityLeft}"
helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_left.png"/>
<Grid HorizontalAlignment="Right">
<Button Name="btnVisibilityRight" Tag="right"
Style="{StaticResource VerticalTrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="{Binding BtnVisibilityRight}">
<Path Data="M13.0607 12.1111L8.11067 17.0611L9.52467 18.4751L15.8887 12.1111L9.52467 5.7471L8.11067 7.1611L13.0607 12.1111Z"
Fill="White" Stretch="Uniform"
Width="7.78" Height="12.728"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Button>
<Button Tag="right" Margin="0"
Style="{StaticResource ImageButtonStyle}"
Width="25" Command="{Binding ChangeDrawerStatusCommand}"
VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityRight}"
helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_right.png"/>
<Button Name="btnVisibilityLeft" Tag="left"
Style="{StaticResource VerticalTrapezoidButtonStyle}" Command="{Binding ChangeDrawerStatusCommand}"
VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="{Binding BtnVisibilityLeft}">
<Path Data="M11.1615 12.1111 L16.11153 17.0611 L14.69753 18.4751 L8.3335 12.1111 L14.69753 5.7471 L16.11153 7.1611 Z"
Fill="White" Stretch="Uniform"
Width="7.78" Height="12.728"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Grid>
</Border>
<md:DrawerHost.RightDrawerContent>
<Border Width="300"
BorderBrush="#2d374c" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid>
<Border VerticalAlignment="Center" Margin="40 0">
<md:PackIcon Kind="Cctv" Foreground="#ffd663" Width="30" Height="30"/>
</Border>
<TextBlock Text="CCTV 목록" FontFamily="{StaticResource SCDream5}"
FontSize="20" FontWeight="Bold" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Border Width="348" Background="#1D3649" CornerRadius="0 4 4 0">
<Border Margin="16" CornerRadius="4" Background="#152935"
BorderBrush="#325C80" BorderThickness="1">
<Grid Margin="24">
<Grid.RowDefinitions>
<RowDefinition Height="41"/>
<RowDefinition/>
<RowDefinition Height="81"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Margin="0 0 0 16">
<Image Source="/Resources/Images/cctv.png"
VerticalAlignment="Center"
Width="20" Height="20"/>
<TextBlock Text="CCTV 목록" FontFamily="{StaticResource SCDream5}"
FontSize="18" FontWeight="Bold" Foreground="White"
VerticalAlignment="Center" Margin="8 0"/>
</StackPanel>
<ListView Grid.Row="1" Margin="10 0"
ItemsSource="{Binding CCTVInfoList}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
BorderThickness="0" Background="Transparent">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
<GridViewColumn Header="상태" Width="50">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Ellipse Width="15" Height="15" VerticalAlignment="Center" HorizontalAlignment="Center">
<ListView Grid.Row="1" Width="250"
ItemsSource="{Binding CCTVInfoList}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
BorderThickness="0" Background="Transparent">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="RowBorder"
BorderBrush="#767676"
BorderThickness="0 0 0 1"
Background="Transparent">
<GridViewRowPresenter
Content="{TemplateBinding Content}"
Columns="{Binding RelativeSource={RelativeSource AncestorType=ListView},
Path=View.Columns}"
VerticalAlignment="Center"
Height="40"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="RowBorder" Property="Background" Value="#2D4B63"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="RowBorder" Property="Background" Value="#223E52"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
<GridViewColumn Header="상태" Width="60">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Ellipse Width="14" Height="14">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Red"/>
@ -93,59 +126,57 @@
</Style>
</Ellipse.Style>
</Ellipse>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="ID" Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="ID" Width="95">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding DeviceId}"
Style="{StaticResource GridViewTextBlockStyle}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="CCTV" Width="150">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
Style="{StaticResource GridViewTextBlockStyle}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="CCTV" Width="95">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding DeviceName}"
Style="{StaticResource GridViewTextBlockStyle}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<!--하단 버튼-->
<Grid Grid.Row="2">
<Button Padding="0" Margin="5" Content="재생"
Visibility="{Binding BtnVisibilityPlay}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Style="{StaticResource MaterialDesignFlatMidBgButton}"
FontFamily="{StaticResource SCDream5}"
Command="{Binding PlayAllCCTVCommand}">
<Button.ToolTip>
<ToolTip Content="CCTV 재생"/>
</Button.ToolTip>
</Button>
<Button Padding="0" Margin="5" Content="중지"
Visibility="{Binding BtnVisibilityStop}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Style="{StaticResource MaterialDesignFlatMidBgButton}"
FontFamily="{StaticResource SCDream5}"
Command="{Binding StopAllCCTVCommand}">
<Button.ToolTip>
<ToolTip Content="CCTV 재생"/>
</Button.ToolTip>
</Button>
<!--하단 버튼-->
<Grid Grid.Row="2">
<Button Padding="0" Content="재생"
Style="{StaticResource GeneralButtonStyle}"
Margin="0 16 0 0"
Width="250" Height="41"
Visibility="{Binding BtnVisibilityPlay}"
HorizontalAlignment="Center" VerticalAlignment="Bottom"
Command="{Binding PlayAllCCTVCommand}">
<Button.ToolTip>
<ToolTip Content="CCTV 재생"/>
</Button.ToolTip>
</Button>
<Button Padding="0" Content="중지"
Style="{StaticResource GeneralButtonStyle}"
Margin="0 16 0 0"
Width="250" Height="41"
Visibility="{Binding BtnVisibilityStop}"
HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
Command="{Binding StopAllCCTVCommand}">
<Button.ToolTip>
<ToolTip Content="CCTV 재생"/>
</Button.ToolTip>
</Button>
</Grid>
</Grid>
</Grid>
</Border>
</Border>
</md:DrawerHost.RightDrawerContent>
</md:DrawerHost>

2
SmartAquaViewer/View/EnegyView.xaml
Unescape View File

@ -529,7 +529,7 @@
<StackPanel Orientation="Horizontal" Grid.Row="1"
HorizontalAlignment="Right" Margin="0 0 24 24">
<Button Content="그래프 생성"
Style="{StaticResource GraphButtonStyle}"
Style="{StaticResource GeneralButtonStyle}"
Command="{Binding DrawGraphCommand}"/>
</StackPanel>
</Grid>

2
SmartAquaViewer/View/GreenHouseView.xaml
Unescape View File

@ -527,7 +527,7 @@
<StackPanel Orientation="Horizontal" Margin="0 0 24 24"
Grid.Row="1" HorizontalAlignment="Right">
<Button Content="그래프 생성"
Style="{StaticResource GraphButtonStyle}"
Style="{StaticResource GeneralButtonStyle}"
FontWeight="Bold" Command="{Binding DrawGraphCommand}"/>
</StackPanel>

2
SmartAquaViewer/View/MonitoringView.xaml
Unescape View File

@ -924,7 +924,7 @@
</StackPanel>
<Button Content="그래프 생성" Grid.Row="1" HorizontalAlignment="Right"
Style="{StaticResource GraphButtonStyle}"
Style="{StaticResource GeneralButtonStyle}"
Margin="0 0 24 24" Padding="20 0"
Command="{Binding DrawGraphCommand}"/>
</Grid>

Write Preview
Loading…
Cancel
Save