具备界面基础功能
This commit is contained in:
374
SHH.CameraDashboard/Pages/CameraList.xaml
Normal file
374
SHH.CameraDashboard/Pages/CameraList.xaml
Normal file
@@ -0,0 +1,374 @@
|
||||
<UserControl
|
||||
x:Class="SHH.CameraDashboard.CameraList"
|
||||
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="600"
|
||||
d:DesignWidth="300"
|
||||
mc:Ignorable="d">
|
||||
|
||||
<UserControl.Resources>
|
||||
<BooleanToVisibilityConverter x:Key="BoolToVis" />
|
||||
</UserControl.Resources>
|
||||
|
||||
<Grid Background="{DynamicResource Brush.Bg.Panel}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ComboBox
|
||||
Grid.Row="0"
|
||||
Height="32"
|
||||
Margin="10,10,10,0"
|
||||
VerticalContentAlignment="Center"
|
||||
ItemsSource="{Binding NodeOptions}"
|
||||
SelectedItem="{Binding SelectedNode}">
|
||||
<ComboBox.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock FontWeight="SemiBold" Text="{Binding ServiceNodeName}" />
|
||||
<TextBlock
|
||||
Margin="5,0,0,0"
|
||||
Foreground="Gray"
|
||||
Text="{Binding ServiceNodeIp, StringFormat=' ({0})'}">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding ServiceNodeIp}" Value="ALL">
|
||||
<Setter Property="Visibility" Value="Collapsed" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</ComboBox.ItemTemplate>
|
||||
</ComboBox>
|
||||
|
||||
<Grid Grid.Row="1" Margin="10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Border
|
||||
Padding="8,6"
|
||||
Background="{DynamicResource Brush.Bg.Input}"
|
||||
CornerRadius="4">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<TextBlock
|
||||
Grid.Column="0"
|
||||
Margin="0,0,5,0"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Text="🔍" />
|
||||
|
||||
<TextBox
|
||||
Grid.Column="1"
|
||||
VerticalContentAlignment="Center"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
CaretBrush="{DynamicResource Brush.Text.Primary}"
|
||||
FontSize="14"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<WrapPanel Grid.Column="1" Margin="0,5,0,0">
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="5,0,0,0"
|
||||
Command="{Binding AddCameraCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="添加新设备">
|
||||
<Path
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{StaticResource Icon.Plus}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
Width="32"
|
||||
Height="32"
|
||||
Margin="5,0,0,0"
|
||||
Command="{Binding RefreshCommand}"
|
||||
Style="{StaticResource Btn.Ghost.Info}"
|
||||
ToolTip="重新加载数据">
|
||||
<Path
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{StaticResource Icon.Refresh}"
|
||||
Style="{StaticResource Style.IconPath}" />
|
||||
</Button>
|
||||
</WrapPanel>
|
||||
|
||||
</Grid>
|
||||
|
||||
<ListBox
|
||||
Grid.Row="2"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
ItemsSource="{Binding FilteredCameras}"
|
||||
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
|
||||
SelectedItem="{Binding SelectedCamera}">
|
||||
|
||||
<ListBox.ItemContainerStyle>
|
||||
<Style TargetType="ListBoxItem">
|
||||
<Setter Property="Padding" Value="10,8" />
|
||||
<Setter Property="Margin" Value="0,0,0,1" />
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="ListBoxItem">
|
||||
<Grid Margin="0,0,0,1">
|
||||
<Border
|
||||
x:Name="bd"
|
||||
Margin="5,0"
|
||||
Background="Transparent"
|
||||
CornerRadius="4"
|
||||
Opacity="0" />
|
||||
<Border Padding="{TemplateBinding Padding}">
|
||||
<ContentPresenter />
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="bd" Property="Background" Value="{DynamicResource Brush.Text.Primary}" />
|
||||
<Setter TargetName="bd" Property="Opacity" Value="0.1" />
|
||||
</Trigger>
|
||||
|
||||
<Trigger Property="IsSelected" Value="True">
|
||||
<Setter TargetName="bd" Property="Background" Value="{DynamicResource Brush.Brand}" />
|
||||
<Setter TargetName="bd" Property="Opacity" Value="0.2" />
|
||||
|
||||
<Setter Property="Foreground" Value="{DynamicResource Brush.Brand}" />
|
||||
<Setter Property="FontWeight" Value="Bold" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
</ListBox.ItemContainerStyle>
|
||||
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<Grid Margin="0,4">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<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 IsPhysicalOnline}" Value="True">
|
||||
<Setter Property="Background" Value="#55FF55" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Border.Style>
|
||||
</Border>
|
||||
|
||||
<StackPanel Grid.Column="1" VerticalAlignment="Center">
|
||||
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<WrapPanel>
|
||||
<TextBlock
|
||||
Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="14"
|
||||
FontWeight="Bold">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Text" Value="{Binding Name}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource Brush.Text.Primary}" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding 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 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="12,0,10,0"
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.5"
|
||||
Text="{Binding Id}" />
|
||||
</WrapPanel>
|
||||
|
||||
<Button
|
||||
Grid.Column="1"
|
||||
Width="24"
|
||||
Height="24"
|
||||
Margin="5,0,0,0"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
ToolTip="{Binding Status}">
|
||||
|
||||
<Path
|
||||
Width="14"
|
||||
Height="14"
|
||||
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.Brand}" />
|
||||
|
||||
<Style.Triggers>
|
||||
|
||||
<DataTrigger Binding="{Binding IsPhysicalOnline}" Value="False">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Status.WifiOff}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.State.Danger}" />
|
||||
</DataTrigger>
|
||||
|
||||
<DataTrigger Binding="{Binding Status}" Value="Connecting">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Status.Loading}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.State.Warning}" />
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Status}" Value="Authorizing">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Status.Loading}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.State.Warning}" />
|
||||
</DataTrigger>
|
||||
|
||||
<DataTrigger Binding="{Binding Status}" Value="Playing">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Action.Pause}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.Status.Warning}" />
|
||||
</DataTrigger>
|
||||
|
||||
<DataTrigger Binding="{Binding Status}" Value="Streaming">
|
||||
<Setter Property="Data" Value="{StaticResource Icon.Action.Pause}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource Brush.Status.Warning}" />
|
||||
</DataTrigger>
|
||||
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Path.Style>
|
||||
</Path>
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<StackPanel Margin="0,2,0,0" Orientation="Horizontal">
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding IpAddress}" />
|
||||
<TextBlock
|
||||
Margin="4,0"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.3"
|
||||
Text="|" />
|
||||
<TextBlock
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.7"
|
||||
Text="{Binding Brand}" />
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Margin="0,2,0,0" Orientation="Horizontal">
|
||||
<StackPanel.Style>
|
||||
<Style TargetType="StackPanel">
|
||||
<Setter Property="Visibility" Value="Collapsed" />
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Status}" Value="Playing">
|
||||
<Setter Property="Visibility" Value="Visible" />
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Status}" Value="Streaming">
|
||||
<Setter Property="Visibility" Value="Visible" />
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</StackPanel.Style>
|
||||
|
||||
<TextBlock
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.6">
|
||||
<Run Foreground="{DynamicResource Brush.Text.Primary}" Text="{Binding Width}" />
|
||||
<Run Text="x" />
|
||||
<Run Foreground="{DynamicResource Brush.Text.Primary}" Text="{Binding Height}" />
|
||||
</TextBlock>
|
||||
|
||||
<TextBlock Text=" " />
|
||||
|
||||
<TextBlock
|
||||
FontSize="11"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Opacity="0.6">
|
||||
<Run Text="FPS:" />
|
||||
<Run
|
||||
FontWeight="Bold"
|
||||
Foreground="{DynamicResource Brush.Text.Primary}"
|
||||
Text="{Binding RealFps}" />
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<Grid
|
||||
Grid.Row="2"
|
||||
Background="{DynamicResource Brush.Bg.Panel}"
|
||||
Visibility="{Binding IsLoading, Converter={StaticResource BoolToVis}}">
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
|
||||
<ProgressBar
|
||||
Width="100"
|
||||
Height="4"
|
||||
Margin="0,0,0,10"
|
||||
IsIndeterminate="True" />
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="12"
|
||||
Foreground="{DynamicResource Brush.Text.Secondary}"
|
||||
Text="正在同步数据..." />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</UserControl>
|
||||
Reference in New Issue
Block a user