ウィンドウの幅に基づいてWPFグリッドレイアウトを調整する方法を探しています

Question

ユーザーコントロールに基づいてウィンドウに情報を表示するアプリケーションがあります。ボタンをクリックすると、次の行にユーザーコントロールを追加し、別のスキルに加入してそのスキル情報を取得できます。あなたはこれを何度でもやることができます。

私はウィンドウが一定のサイズの幅に達すると、すべての行セルが列セルになり、列セルが行セルになり、現在のように整列するのではなく、ウィンドウがどのようにサイズ調整されるか。

私が尋ねていることが既に存在するかどうか、あるいはこれを行うグリッド以外に何かがあるかどうかはわかりません。私はより良い何を意味するか説明する

スクリーンショット： これは、それはこの私は幅ものXAMLを追加することは十分に小さい

を取得するときに変換autoにそれを好むだろうか、私の図である今ある方法ですユーザーコントロール：あなたの正確なレイアウトのニーズに応じて、コメントとして

<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という2つの例があります。異なる詳細レイアウトが必要な場合は、他のものも使用できます。コンテンツのレイアウトを調整するためにブールコンバータへ

幅で

<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> 
    <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>