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

2
SmartAquaViewer/View/EnegyView.xaml
Unescape View File

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

2
SmartAquaViewer/View/GreenHouseView.xaml
Unescape View File

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

2
SmartAquaViewer/View/MonitoringView.xaml
Unescape View File

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

Write Preview
Loading…
Cancel
Save