我有一个应用程序,它根据用户控件在窗口上显示信息。您可以单击按钮在下一行中添加用户控件,并订阅其他技能以获取该技能信息。你可以根据需要多次这样做。
我正在寻找一种方法,所以当窗口达到一定宽度的宽度时,所有行单元格成为列单元格,列单元格成为行单元格,而不是像目前那样对齐,它将调整为窗户的大小。
我不确定我所询问的内容是否已经存在,或者是否还有其他内容可能会执行此操作。
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>
答案 0 :(得分:2)
如评论所述,根据您的确切布局需求,有几个容器比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
中并替换工具栏{{ 1}}布局更改的属性:
DockPanel.Dock