<UserControl
    x:Class="SHH.CameraDashboard.VideoWall"
    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"
    xmlns:vm="clr-namespace:SHH.CameraDashboard"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vm:VideoWallViewModel />
    </UserControl.DataContext>

    <Grid Background="#111">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel
            Grid.Row="0"
            Margin="0,0,0,2"
            Background="#252526"
            Orientation="Horizontal">
            <TextBlock
                Margin="10,0"
                VerticalAlignment="Center"
                Foreground="White"
                Text="📺 视频墙布局：" />

            <Button
                Margin="5,0"
                Command="{Binding SetLayoutCommand}"
                CommandParameter="1x1"
                Content="1画面"
                Style="{StaticResource PrimaryBtnStyle}" />
            <Button
                Margin="5,0"
                Command="{Binding SetLayoutCommand}"
                CommandParameter="2x2"
                Content="4画面"
                Style="{StaticResource PrimaryBtnStyle}" />
            <Button
                Margin="5,0"
                Command="{Binding SetLayoutCommand}"
                CommandParameter="3x3"
                Content="9画面"
                Style="{StaticResource PrimaryBtnStyle}" />
        </StackPanel>

        <ListBox
            Grid.Row="1"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Background="Transparent"
            BorderThickness="0"
            ItemsSource="{Binding VideoTiles}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding DataContext.Columns, RelativeSource={RelativeSource AncestorType=UserControl}}" Rows="0" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <local:VideoTile />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>