XAML C # Dynamic arrangement of elements in a window on a grid
I am new to C # and XAML and am having difficulty dynamically resizing / positioning elements. I want to create a 3x3 grid using this schematic:
text | text | grid
image | image | same grid of above
text | text | same grid of above
I wrote the following code:
<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>
But I can't see all the elements. Also, when I resize the window, the grid gets cut or resized.
+3
source to share
1 answer
I solved this problem by setting the rows and columns with the image to * and not Auto. I also added a viewBox for all images so that the image ratio is maintained and the image is not scaled down.
<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>
+2
source to share