寻找一种基于窗口宽度调整WPF网格布局的方法

Question

我有一个应用程序，可以在基于用户控件的窗口上显示信息。 您可以单击按钮以在下一行中添加用户控件，然后订阅其他技能以获取该技能信息。 您可以根据需要多次执行此操作。

我正在寻找一种方法，以便当窗口达到一定宽度时，所有行单元格变为列单元格，而列单元格变为行单元格，而不是像当前那样对齐，它将适应窗口的方式大小。

我不确定我要问的内容是否已经存在，或者是否存在其他可能会执行此操作的网格。

ScreenShots解释我的意思更好： 现在就是这样 这是我的画法，当宽度足够小时我希望它自动转换为

还添加了usercontrol的XAML：

<Grid Loaded="DisplayNumber_Loaded" MaxWidth="540" MaxHeight="40">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>            
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
                <Button HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="AgentWindow" Click="AgentWindow_Click">
                    <TextBlock x:Name="button" Text="agent"/>
                <Button.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Open Full Agent List" Click="MenuItem_Click"/>
                        <MenuItem Header="Open Aux Only" Click="MenuItem_Click_1"/>
                    </ContextMenu>
                </Button.ContextMenu>
            </Button>
            </Grid>        

            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock TextWrapping="Wrap" Grid.Row="0" x:Name="TeamNameText" VerticalAlignment="Bottom" HorizontalAlignment="Center" Foreground="White" Text="Team Name"/>
                <TextBlock Grid.Row="1" x:Name="SkillNum"  HorizontalAlignment="Center" Foreground="White" Text="Skill Number" VerticalAlignment="Top" FontSize="15"/>
            </Grid>        

        <Grid Grid.Column="2">
            <Image Margin="5, 5, 5, 5" x:Name="CallImage" VerticalAlignment="Center" HorizontalAlignment="Center" />
        </Grid>   

        <Grid Grid.Column="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>  
                <TextBlock Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="0" Grid.ColumnSpan="2" x:Name="WaitTimeText" Text="Wait Time"/>

                <TextBlock Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0" FontSize="15" x:Name="AgentAvailableData" Text="Available Number"/>
                <TextBlock Foreground="White" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1" FontSize="12" x:Name="WaitTimeData" Text="Wait Time"/>            
        </Grid>

            <Grid Grid.Column="4">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>  
            </Grid>        
            <TextBlock Grid.Column="4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="HotSeat" Text="HotSeat" MouseDown="HotSeat_MouseDown" MouseLeave="HotSeat_MouseLeave"/>
    </Grid>

Answer 1

如前所述，根据您的确切布局需求，有几个容器比Grid更容易处理。 这是两个示例，其中包含WrapPanel和StackPanel 。 如果需要不同的细节布局，其他人也可以使用。

<Window.Resources>
    <local:RestrictedWidthConverter x:Key="RestrictedWidthOverflowConverter" WidthLimit="300"/>
</Window.Resources>
<Grid x:Name="grid1">
    <!-- Take 1: just wrap with available space, no sudden re-layout -->
    <WrapPanel>
        <TextBlock Text="Test1" Margin="20"/>
        <TextBlock Text="Test2" Margin="20"/>
        <TextBlock Text="Test3" Margin="20"/>
        <TextBlock Text="Test4" Margin="20"/>
        <TextBlock Text="Test5" Margin="20"/>
        <TextBlock Text="Test6" Margin="20"/>
        <TextBlock Text="Test7" Margin="20"/>
        <TextBlock Text="Test8" Margin="20"/>
    </WrapPanel>
    <!-- Take 2: trigger orientation based on some parent element ActualWidth (could be the window) -->
    <StackPanel>
        <TextBlock Text="Test1" Margin="20"/>
        <TextBlock Text="Test2" Margin="20"/>
        <TextBlock Text="Test3" Margin="20"/>
        <TextBlock Text="Test4" Margin="20"/>
        <TextBlock Text="Test5" Margin="20"/>
        <TextBlock Text="Test6" Margin="20"/>
        <TextBlock Text="Test7" Margin="20"/>
        <TextBlock Text="Test8" Margin="20"/>
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Setter Property="Orientation" Value="Horizontal"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=grid1,Path=ActualWidth,Converter={StaticResource RestrictedWidthOverflowConverter}}" Value="True">
                        <Setter Property="Orientation" Value="Vertical"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>
    </StackPanel>
</Grid>

具有宽度到布尔转换器

public class RestrictedWidthConverter : IValueConverter
{
    public double WidthLimit { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double)
        {
            var width = (double)value;
            return width <= WidthLimit;
        }
        return Binding.DoNothing;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

为了调整内容布局（假设此问题与侧面工具栏面板有关），最好将工具栏和主要内容包装在DockPanel并使用布局更改来交替使用工具栏DockPanel.Dock属性：

<DockPanel>
    <StackPanel>
        <!-- Items ... -->
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Setter Property="Orientation" Value="Horizontal"/>
                <Setter Property="DockPanel.Dock" Value="Top"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=grid1,Path=ActualWidth,Converter={StaticResource RestrictedWidthOverflowConverter}}" Value="True">
                        <Setter Property="Orientation" Value="Vertical"/>
                        <Setter Property="DockPanel.Dock" Value="Left"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>
    </StackPanel>
    <!-- The main content area element -->
    <Border BorderThickness="5" BorderBrush="Green" Background="Gray"/>
</DockPanel>