XAML C＃按網格在窗口中元素的動態位置

我是C＃和XAML的新手，我很難動態調整元素的大小和位置。我想創建3x3的網格，這個模式：XAML C＃按網格在窗口中元素的動態位置

text | text | grid 
image | image | same grid of above 
text | text | same grid of above

我寫了下面的代碼：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Microsoft.Samples.Kinect.BodyBasics.MainWindow" 
     Title="Body tracking" 
     Height="Auto" Width="Auto" 
     Loaded="MainWindow_Loaded" 
     Closing="MainWindow_Closing"> 
    <Window.Resources> 
     <SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e" /> 
     <SolidColorBrush x:Key="KinectPurpleBrush" Color="#ff52318f" /> 
     <SolidColorBrush x:Key="KinectBlueBrush" Color="#ff00BCF2" /> 
    </Window.Resources> 
    <Grid Margin="10,1,10,1" ShowGridLines="True" Height="Auto" Width="Auto" VerticalAlignment="Bottom"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <TextBlock MinHeight="25" MinWidth="25" Grid.Row="0" Grid.Column="0" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18"><Run Text="Body Tracking"/> 
     </TextBlock> 

     <Viewbox Grid.Row="1" Grid.Column="0"> 
      <Border x:Name="borderSkeleton" BorderThickness="7" Height="Auto" Width="Auto"> 
       <Image Source="{Binding ImageSource}" Stretch="UniformToFill" /> 
      </Border> 
     </Viewbox> 

     <Image Grid.Column="1" Grid.Row="1" x:Name="imageReference" Height="Auto" Width="Auto" Stretch="UniformToFill"/> 

     <StatusBar MinHeight="25" MaxHeight="25" x:Name="statusBar" Grid.Row="2" Grid.Column="0" Background="White" Foreground="{StaticResource MediumGreyBrush}"> 
      <StatusBarItem Content="{Binding StatusText}" /> 
     </StatusBar> 
     <Label x:Name="lblIstruction" Grid.Row="0" Grid.Column="1" Content="Reference Pose: please, position yourself as picture" Width="Auto" Height="Auto" FontSize="16"/> 
     <Grid Grid.Row="1" Grid.Column="2" Grid.RowSpan="3" Width="Auto" Height="Auto"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Label Grid.Row="0" x:Name="lblFeedback1" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="1" x:Name="lblFeedback2" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="2" x:Name="lblFeedback3" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="3" x:Name="lblFeedback4" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="4" x:Name="lblFeedback5" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="5" x:Name="lblFeedback6" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="6" x:Name="lblFeedback7" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="7" x:Name="lblFeedback8" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="8" x:Name="lblFeedback9" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="9" x:Name="lblFeedback10" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="10" x:Name="lblFeedback11" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="11" x:Name="lblFeedback12" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="12" x:Name="lblFeedback13" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="13" x:Name="lblFeedback14" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
      <Label Grid.Row="14" x:Name="lblFeedback15" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     </Grid> 
     <Label Grid.Row="2" Grid.Column="1" x:Name="lblSummaryFeedback" FontSize="18" FontWeight="Bold" Width="Auto" Height="Auto" /> 
    </Grid> 
</Window>

但我不能看到所有的元素。另外，當我調整窗口大小時，網格會被剪切或調整大小。

來源

2014-11-03 luca

我通過將圖像的行和列設置爲*而不是自動解決了此問題。我還爲所有圖像添加了viewBox，以便保持圖像比例並且不會減少圖像。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Microsoft.Samples.Kinect.BodyBasics.MainWindow" 
    Title="Body tracking" 
    Height="Auto" Width="Auto" 
    Loaded="MainWindow_Loaded" 
    Closing="MainWindow_Closing"> 
<Window.Resources> 
    <SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e" /> 
    <SolidColorBrush x:Key="KinectPurpleBrush" Color="#ff52318f" /> 
    <SolidColorBrush x:Key="KinectBlueBrush" Color="#ff00BCF2" /> 
</Window.Resources> 
<Grid Margin="10,1,10,1" ShowGridLines="True" VerticalAlignment="Bottom"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="2*" /> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <TextBlock MinHeight="25" MinWidth="25" Grid.Row="0" Grid.Column="0" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18"><Run Text="Body Tracking"/></TextBlock> 

    <Viewbox Grid.Row="1" Grid.Column="0"> 
     <Border x:Name="borderSkeleton" BorderThickness="7" Height="Auto" Width="Auto"> 
      <Image Source="{Binding ImageSource}" Stretch="UniformToFill" /> 
     </Border> 
    </Viewbox> 

    <Viewbox Grid.Row="1" Grid.Column="1"> 
     <Image x:Name="imageReference" Stretch="UniformToFill" /> 
    </Viewbox> 

    <StatusBar MinHeight="25" MaxHeight="25" x:Name="statusBar" Grid.Row="2" Grid.Column="0" Background="White" Foreground="{StaticResource MediumGreyBrush}"> 
     <StatusBarItem Content="{Binding StatusText}" /> 
    </StatusBar> 
    <Label x:Name="lblIstruction" Grid.Row="0" Grid.Column="1" Content="Reference Pose: please, position yourself as picture" Width="Auto" Height="Auto" FontSize="16"/> 
    <Grid Grid.Row="1" Grid.Column="2" Grid.RowSpan="3" Width="Auto" Height="Auto"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Label Grid.Row="0" x:Name="lblFeedback1" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="1" x:Name="lblFeedback2" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="2" x:Name="lblFeedback3" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="3" x:Name="lblFeedback4" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="4" x:Name="lblFeedback5" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="5" x:Name="lblFeedback6" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="6" x:Name="lblFeedback7" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="7" x:Name="lblFeedback8" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="8" x:Name="lblFeedback9" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="9" x:Name="lblFeedback10" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="10" x:Name="lblFeedback11" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="11" x:Name="lblFeedback12" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="12" x:Name="lblFeedback13" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="13" x:Name="lblFeedback14" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     <Label Grid.Row="14" x:Name="lblFeedback15" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
    </Grid> 
    <Label Grid.Row="2" Grid.Column="1" x:Name="lblSummaryFeedback" FontSize="18" FontWeight="Bold" Width="Auto" Height="Auto" /> 
</Grid>

來源

2014-11-03 11:34:53 luca

什麼樣的變化，你做出可能有助於這個問題的未來觀衆的說明。 – PTuckley 2014-11-03 11:46:12

我已更新我的ansewer :) – luca 2014-11-03 11:55:49

XAML C＃按網格在窗口中元素的動態位置

回答

相關問題