具备界面基础功能
This commit is contained in:
364
SHH.CameraDashboard/Pages/CameraItemTop.xaml
Normal file
364
SHH.CameraDashboard/Pages/CameraItemTop.xaml
Normal file
@@ -0,0 +1,364 @@
|
||||
<UserControl
|
||||
x:Class="SHH.CameraDashboard.CameraItemTop"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="clr-namespace:SHH.CameraDashboard"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
d:DesignHeight="100"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
|
||||
<Border
|
||||
Padding="20,12,20,6"
|
||||
Background="{DynamicResource Brush.Bg.Panel}"
|
||||
BorderBrush="{DynamicResource Brush.Border}"
|
||||
BorderThickness="0,0,0,1">
|
||||
|
||||
<Grid>
|
||||
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
|
||||
<Grid.Style>
|
||||
<Style TargetType="Grid">
|
||||
<Setter Property="Visibility" Value="Collapsed" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding HasSelection}" Value="False">
|
||||
<Setter Property="Visibility" Value="Visible" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Grid.Style>
|
||||
<TextBlock
|
||||
FontSize="16"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.5"
|
||||
Text="请在左侧列表中选择一个摄像头以查看详情" />
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Style>
|
||||
<Style TargetType="Grid">
|
||||
<Setter Property="Visibility" Value="Visible" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding HasSelection}" Value="False">
|
||||
<Setter Property="Visibility" Value="Collapsed" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Grid.Style>
|
||||
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="120" />
|
||||
<ColumnDefinition Width="210" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<WrapPanel>
|
||||
<!-- 在线、离线小圆点 -->
|
||||
<Border
|
||||
Width="10"
|
||||
Height="10"
|
||||
Margin="0,0,10,0"
|
||||
VerticalAlignment="Center"
|
||||
CornerRadius="5">
|
||||
<Border.Style>
|
||||
<Style TargetType="Border">
|
||||
<Setter Property="Background" Value="#FF5555" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="True">
|
||||
<Setter Property="Background" Value="#55FF55" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Border.Style>
|
||||
</Border>
|
||||
|
||||
<!-- 播放状态、ID号 -->
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition />
|
||||
<RowDefinition />
|
||||
</Grid.RowDefinitions>
|
||||
<Border
|
||||
Margin="6,2,0,0"
|
||||
Padding="6,2"
|
||||
VerticalAlignment="Center"
|
||||
CornerRadius="4">
|
||||
<Border.Style>
|
||||
<Style TargetType="Border">
|
||||
<Setter Property="Background" Value="#10808080" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Camera.Status}" Value="Playing">
|
||||
<Setter Property="Background" Value="#00CC6A" />
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Camera.Status}" Value="Faulted">
|
||||
<Setter Property="Background" Value="#FF5555" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Border.Style>
|
||||
<TextBlock
|
||||
FontSize="11"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="White"
|
||||
Text="{Binding Camera.Status}" />
|
||||
</Border>
|
||||
|
||||
<TextBlock
|
||||
Grid.Row="1"
|
||||
Margin="6,8,0,0"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.6"
|
||||
Text="ID:" />
|
||||
|
||||
<TextBlock
|
||||
Grid.Row="1"
|
||||
Margin="26,8,0,0"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Text="{Binding Camera.Id}" />
|
||||
|
||||
</Grid>
|
||||
</WrapPanel>
|
||||
|
||||
<Grid Grid.Column="1">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition />
|
||||
<RowDefinition />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<WrapPanel>
|
||||
<!-- 设备名称 -->
|
||||
<TextBlock
|
||||
VerticalAlignment="Center"
|
||||
FontSize="14"
|
||||
FontWeight="Bold">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Text" Value="{Binding Camera.Name}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource Brush.Text.Primary}" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Camera.Name}" Value="">
|
||||
<Setter Property="Text" Value="未命名" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource Brush.Text.Secondary}" />
|
||||
<Setter Property="FontStyle" Value="Italic" />
|
||||
<Setter Property="Opacity" Value="0.5" />
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Camera.Name}" Value="{x:Null}">
|
||||
<Setter Property="Text" Value="未命名" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource Brush.Text.Secondary}" />
|
||||
<Setter Property="FontStyle" Value="Italic" />
|
||||
<Setter Property="Opacity" Value="0.5" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
|
||||
<TextBlock
|
||||
Margin="4,0,0,0"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.5"
|
||||
Text="{Binding Camera.Brand}" />
|
||||
</WrapPanel>
|
||||
|
||||
<!-- IP 地址 -->
|
||||
<TextBlock
|
||||
Grid.Row="1"
|
||||
HorizontalAlignment="Left"
|
||||
FontFamily="Consolas"
|
||||
FontSize="16"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding Camera.IpAddress}" />
|
||||
</Grid>
|
||||
|
||||
<WrapPanel Grid.Column="2" VerticalAlignment="Center">
|
||||
<!-- 分辨率 -->
|
||||
<StackPanel Margin="20,0,20,0">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Right"
|
||||
FontSize="10"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.5"
|
||||
Text="RESOLUTION" />
|
||||
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
|
||||
<TextBlock
|
||||
FontSize="16"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding Camera.Width}" />
|
||||
<TextBlock
|
||||
Margin="2,0"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="14"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Text=" x " />
|
||||
<TextBlock
|
||||
FontSize="16"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding Camera.Height}" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<Border BorderBrush="{DynamicResource Brush.Border}" BorderThickness="0,0,1,0" />
|
||||
|
||||
<!-- 实际帧 -->
|
||||
<StackPanel Margin="20,0,20,0">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Right"
|
||||
FontSize="10"
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.5"
|
||||
Text="REAL FPS" />
|
||||
<TextBlock
|
||||
HorizontalAlignment="Right"
|
||||
FontSize="16"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding Camera.RealFps}" />
|
||||
</StackPanel>
|
||||
</WrapPanel>
|
||||
|
||||
<StackPanel
|
||||
Grid.Column="4"
|
||||
VerticalAlignment="Center"
|
||||
Orientation="Horizontal">
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="8,0,8,0"
|
||||
Command="{Binding DeleteCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Danger}"
|
||||
ToolTip="删除此摄像头">
|
||||
<Path
|
||||
Width="24"
|
||||
Height="24"
|
||||
Data="{StaticResource Icon.Trash}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="8,0,8,0"
|
||||
Command="{Binding EditDeviceCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="编辑设备配置">
|
||||
<Path
|
||||
Width="18"
|
||||
Height="18"
|
||||
Data="{StaticResource Icon.Action.Edit}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="5,0,0,0"
|
||||
Command="{Binding ImageProcessCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="图像处理">
|
||||
<Path
|
||||
Width="24"
|
||||
Height="24"
|
||||
Data="{StaticResource Icon.Action.Process}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="5,0,0,0"
|
||||
Command="{Binding ImageSubscribeCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="图像订阅">
|
||||
<Path
|
||||
Width="18"
|
||||
Height="18"
|
||||
Data="{StaticResource Icon.Action.Subscribe}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="0,0,5,0"
|
||||
Command="{Binding PtzCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="云台控制 (PTZ)">
|
||||
|
||||
<Path
|
||||
Width="24"
|
||||
Height="24"
|
||||
Data="{StaticResource Icon.Ptz}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="8,0,8,0"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Command="{Binding TogglePlayCommand}"
|
||||
Cursor="Hand">
|
||||
<Button.Template>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border
|
||||
x:Name="bd"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="8">
|
||||
|
||||
<Path
|
||||
Width="24"
|
||||
Height="24"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Stretch="Uniform">
|
||||
<Path.Style>
|
||||
<Style TargetType="Path">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Action.Play}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.Text.Secondary}" />
|
||||
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Camera.Status}" Value="Playing">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Action.Pause}" />
|
||||
<Setter Property="Fill" Value="#00CC6A" />
|
||||
</DataTrigger>
|
||||
|
||||
<DataTrigger Binding="{Binding Camera.Status}" Value="Connecting">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Status.Loading}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.State.Warning}" />
|
||||
</DataTrigger>
|
||||
|
||||
<DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="False">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Status.WifiOff}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.State.Danger}" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Path.Style>
|
||||
</Path>
|
||||
</Border>
|
||||
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="bd" Property="Background" Value="#1A808080" />
|
||||
</Trigger>
|
||||
<DataTrigger Binding="{Binding Camera.IsPhysicalOnline}" Value="False">
|
||||
<Setter Property="Cursor" Value="Arrow" />
|
||||
</DataTrigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Button.Template>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Border>
|
||||
</UserControl>
|
||||
Reference in New Issue
Block a user