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

时间:2017-05-10 12:31:54

标签: wpf

我有一个应用程序,它根据用户控件在窗口上显示信息。您可以单击按钮在下一行中添加用户控件,并订阅其他技能以获取该技能信息。你可以根据需要多次这样做。

我正在寻找一种方法,所以当窗口达到一定宽度的宽度时,所有行单元格成为列单元格,列单元格成为行单元格,而不是像目前那样对齐,它将调整为窗户的大小。

我不确定我所询问的内容是否已经存在,或者是否还有其他内容可能会执行此操作。

ScreenShots解释我的意思更好: enter image description here这就是现在的样子enter image description here这是我想要在宽度变得足够小时自动转换的方式

还添加了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>

1 个答案:

答案 0 :(得分:2)

如评论所述,根据您的确切布局需求,有几个容器比Grid更容易处理。以下是两个示例,其中包含WrapPanelStackPanel。如果需要不同的细节布局,其他人也可以工作。

<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中并替换工具栏{{ 1}}布局更改的属性:

DockPanel.Dock