如何在WPF中按钮单击更改网格的比例

Question

我在网格中有这个UI。 这是XAML代码

<Window x:Class="Apps.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Ozeki.Media;assembly=OzekiSDK"
    Closing="Window_Closing"
    ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" FontFamily="Times New Roman">
<Grid Margin="0,0,0,1">
    <Grid Margin="0,53,0,31">
        <Grid x:Name="gridView">
            <Grid.RowDefinitions>
                <RowDefinition Height="293"/>
                <RowDefinition Height="462"/>
                <RowDefinition Height="355"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="553"/>
                <ColumnDefinition Width="553"/>
            </Grid.ColumnDefinitions>
            <GroupBox Grid.Column="0" Header="Camera 1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontSize="20">
                <controls:VideoViewerWPF Name="viewVid1"/>
            </GroupBox>
            <GroupBox Grid.Column="1" Header="Camera 2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="293" Margin="5,0,10,0" FontSize="20">
                <controls:VideoViewerWPF Name="viewVid2"/>
            </GroupBox>
            <GroupBox Grid.Column="0" Header="Camera 3" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0,0,179" FontSize="20">
                <controls:VideoViewerWPF Name="viewVid3"/>
            </GroupBox>
            <GroupBox Grid.Column="1" Header="Camera 4" HorizontalAlignment="Stretch" Margin="5,0,10,179" Grid.Row="1" VerticalAlignment="Stretch" FontSize="20">
                <controls:VideoViewerWPF Name="viewVid4"/>
            </GroupBox>
        </Grid>
    </Grid>
</Grid>

我想将按钮点击中的UI更改为这样的内容。

我不知道从哪里开始，希望有人能帮助我，谢谢你......

Answer 1

更改布局并在网格中创建更多RowDefinition和ColumnDefinition。使用Grid.RowSpan和Grid.ColumnSpan属性可以配置控件应如何填充网格。这可以在xaml和代码隐藏中完成。

Demonstartion（简单边框）

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="320" Width="480">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>            
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <Button Content="2x2" Margin="5" Click="Button_2x2"/>
            <Button Content="1x3" Margin="5" Click="Button_1x3"/>
        </StackPanel>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Border Name="A" Grid.Row="0" Grid.RowSpan="3" 
                    Grid.Column="0" Grid.ColumnSpan="2"
                    Background="Aqua"/>

            <Border Name="B" Grid.Row="0" Grid.RowSpan="3" 
                    Grid.Column="2" Grid.ColumnSpan="2"
                    Background="Blue"/>

            <Border Name="C" Grid.Row="3" Grid.RowSpan="3" 
                    Grid.Column="0" Grid.ColumnSpan="2"
                    Background="Chocolate"/>

            <Border Name="D" Grid.Row="3" Grid.RowSpan="3" 
                    Grid.Column="2" Grid.ColumnSpan="2"
                    Background="DeepPink"/>
        </Grid>
    </Grid>
</Window>

点击更改布局的处理程序：

private void Button_2x2(object sender, RoutedEventArgs e)
{
    A.SetValue(Grid.RowProperty,0);
    A.SetValue(Grid.RowSpanProperty,3);
    A.SetValue(Grid.ColumnProperty,0);
    A.SetValue(Grid.ColumnSpanProperty,2);

    B.SetValue(Grid.RowProperty, 0);
    B.SetValue(Grid.RowSpanProperty, 3);
    B.SetValue(Grid.ColumnProperty, 2);
    B.SetValue(Grid.ColumnSpanProperty, 2);

    C.SetValue(Grid.RowProperty, 3);
    C.SetValue(Grid.RowSpanProperty, 3);
    C.SetValue(Grid.ColumnProperty, 0);
    C.SetValue(Grid.ColumnSpanProperty, 2);

    D.SetValue(Grid.RowProperty, 3);
    D.SetValue(Grid.RowSpanProperty, 3);
    D.SetValue(Grid.ColumnProperty, 2);
    D.SetValue(Grid.ColumnSpanProperty, 2);
}

private void Button_1x3(object sender, RoutedEventArgs e)
{
    A.SetValue(Grid.RowProperty, 0);
    A.SetValue(Grid.RowSpanProperty, 6);
    A.SetValue(Grid.ColumnProperty, 0);
    A.SetValue(Grid.ColumnSpanProperty, 3);

    B.SetValue(Grid.RowProperty, 0);
    B.SetValue(Grid.RowSpanProperty, 2);
    B.SetValue(Grid.ColumnProperty, 3);
    B.SetValue(Grid.ColumnSpanProperty, 1);

    C.SetValue(Grid.RowProperty, 2);
    C.SetValue(Grid.RowSpanProperty, 2);
    C.SetValue(Grid.ColumnProperty, 3);
    C.SetValue(Grid.ColumnSpanProperty, 1);

    D.SetValue(Grid.RowProperty, 4);
    D.SetValue(Grid.RowSpanProperty, 2);
    D.SetValue(Grid.ColumnProperty, 3);
    D.SetValue(Grid.ColumnSpanProperty, 1);
}