Cách tạo một cửa sổ WPF Responsive

Question

Tôi đang sử dụng Blend Expression và chỉ mới bắt đầu với WPF.

Tôi đang cố gắng tạo cửa sổ phản hồi cửa sổ có thể chứa nhiều Lưới và sẽ được kích thước lại theo kích thước cửa sổ ở độ rộng tối thiểu.

Nó sẽ như thế nào:

Mã My So Far:

<Window x:Class="Blend.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" WindowState="Maximized"> 
<Grid> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
       Padding="5" HorizontalAlignment="Left" Margin="20,10,0,0" 
       VerticalAlignment="Top" Height="211.5" Width="484.5"> 
<Grid Background="#FFEDF3F8"> 

</Grid> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="523.333,10,16.334,283.5"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,234,16.334,144"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
    Padding="5" Margin="21.333,372,16.334,31.5"> 
    <Grid Background="#FFEDF3F8"/> 
</Border> 
<Button Content="Button" HorizontalAlignment="Left" Margin="626.833,478.5,0,0" 
VerticalAlignment="Top" Width="49" Background="#FF00458C"/> 
<Button Content="Button" HorizontalAlignment="Left" Margin="693.166,478.5,0,0" 
VerticalAlignment="Top" Width="49" Background="#FF00458C"/> 
</Grid> 
</Window> 

Tôi đã thử 2 điều ở đây Một là Margin và khác được Sử dụng 'sắp xếp' với Width và Height .

Không chắc chắn điều gì sẽ giải quyết mục đích của tôi và thứ hai nó sẽ phản hồi lại kích thước màn hình hay không.

Tôi đã đọc về Dynamic Grid sử dụng * nhưng điều đó dường như không hoạt động ở đây.

Xin cảm ơn,

Answer 1

Bạn hiện không sử dụng lưới đúng cách.

Lưới WPF có thuộc tính cho phép đặt cột và hàng. Sau đó, bạn sẽ đặt các phần tử bên trong lưới và đặt trong đó hàng/cột mà chúng sẽ đi.

Tất nhiên bạn có thể có lưới bên trong lưới và vân vân.

Sau đó, bạn có thể chơi với Độ rộng = "2 *" và những thứ tương tự để làm cho các cột lớn hơn hoặc nhỏ hơn các cột khác "có trả lời".

Mã dưới đây sẽ cung cấp cho bạn một cái gì đó "tương tự" với những gì bạn cố gắng đạt được.

<Grid> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="2*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <Grid Grid.Row="0" 
      Grid.Column="0" 
      Background="Red" /> 

    <Grid Grid.Row="0" 
      Grid.Column="1" 
      Background="Blue" /> 

    <Grid Grid.Row="1" 
      Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Background="Violet" /> 

    <Grid Grid.Row="2" 
      Grid.Column="0" 
      Grid.ColumnSpan="2" 
      Background="Green" /> 

    <StackPanel Grid.Row="3" 
       Grid.ColumnSpan="2" 
       Orientation="Horizontal"> 
     <Button>OK</Button> 
     <Button>Cancel</Button> 
    </StackPanel> 
</Grid> 

Bạn có thể chơi với "*" và "Tự động" cho chiều rộng và chiều cao của cột và các hàng, "*" luôn được định nghĩa là một "phần trăm" của chiều rộng hoặc chiều cao cửa sổ hiện tại. Nếu bạn có một cột với "*" và cột khác có "2 *", cột có "2 *" sẽ lớn gấp hai lần cột "*", sẽ tạo ra 1/3 2/3 tách.

"Tự động" có nghĩa là sẽ lấy "chiều rộng hoặc chiều cao nhỏ hơn cho phép hiển thị bên trong cột".