I have a Windows Phone / XAML Grid composed by 3 columns. In particular, I want the third column to be aligned to the very right side of the screen.
<Grid Background="Transparent" Margin="0,3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="Marker" Width="60" Height="60" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" x:Name="Name" TextAlignment="Left" VerticalAlignment="Center" Margin="20,0" />
<Image Grid.Column="2" x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
</Grid>
The result, instead, is this:
When it should be like this:
As you mentioned its an ItemTemplate of ListBox, what you can do is set HorizontalContentAlignment to Stretch.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Try with this :
<Grid Background="Transparent" Margin="0,3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Image x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>
<TextBlock x:Name="Name" TextAlignment="Left" VerticalAlignment="Center" Margin="20,0" />
</StackPanel>
<Image Grid.Column="1" x:Name="Selected" Width="48" Height="48" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Right"/>
</Grid>
Try HorizontalAlignment="Stretch" in Grid.
I had same problem and it was fixed after removing the stackpanel
Related
I'm currently creating a new WPF window which look like this :
The part starting with "Filter and with the array is define like this :
<Grid Grid.Row="2" Visibility="{Binding FilterVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="20,0,0,0" HorizontalAlignment="Left"
Text="{Binding Source={x:Static dictionnaries:MainDictionnary.bcfFilter}, StringFormat={}{0} :}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="1" Margin="2" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding Filters}">
<ItemsControl.Template>
<ControlTemplate>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterField}"
Grid.Column="0"
Margin="5,2"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterCondition}"
Grid.Column="2" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBlock Text="{x:Static dictionnaries:MainDictionnary.filterValue}"
Grid.Column="4" Margin="5,2"
TextWrapping="WrapWithOverflow" TextAlignment="Center"/>
</Grid>
<Line Grid.Row="0" Fill="Black"
X2="{Binding ActualWidth, Mode=OneWay ,RelativeSource={RelativeSource Self}}"
Stroke="Black" VerticalAlignment="Bottom"/>
<ScrollViewer Grid.Row="1" MinHeight="50" VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="col1"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col2"/>
<ColumnDefinition Width="1" SharedSizeGroup="marg"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="col3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox Grid.Column="0" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Field}"/>
<Line Grid.Column="1"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<ComboBox Grid.Column="2" VerticalAlignment="Center" Margin="3" SelectedItem="{Binding Condition}"/>
<Line Grid.Column="3"
Y2="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Gray"
HorizontalAlignment="Center"/>
<TextBox Grid.Column="4" VerticalAlignment="Center"
HorizontalAlignment="Left" Margin="3"
MinWidth="50"
Text="{Binding Value, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"/>
<Line VerticalAlignment="Bottom"
Grid.ColumnSpan="6" Grid.Column="0"
X2="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Stroke="Black"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Grid.Column="2" Margin="0,0,20,0">
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2" Padding="0"
Command="{Binding AddFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,5 H10 M5,0 V10</Path.Data>
</Path>
</Button>
<Button Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Margin="2"
Command="{Binding RemoveFilterCommand}">
<Path Stroke="Black" StrokeThickness="1" VerticalAlignment="Center">
<Path.Data>M0,0 H8</Path.Data>
</Path>
</Button>
</StackPanel>
</Grid>
The visibility of this part is controled by my viewmodel. Until this everything is working nice, but when I add new rows to the array with the + button, I would like the array not to grow but use a ScrollViewer. So in the ItemControl.template is added the scrollViewer.
But I got this result :
How can I get the scrollviewer to work ?
Set the Height of the second RowDefinition to *:
<RowDefinition Height="*"/>
Or set the Height property of the ItemsControl or ScrollViewer.
A ScrollViewer must have a constrained height to be able to calculate the scrollable view port.
This has to be super simple and just missing it. I have an AutoComplete box and it is not filling the entire space of the box;
The yellow box is added to the image not part of the actual program. The border for each row is added to visually see the space each is taking. Here is the XML for DataTemplate;
<Border Height="Auto" BorderBrush="Black" BorderThickness="1" >
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Description:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Item ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding Descrip}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ItemID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock Text="Department ID:" Foreground="Gray" Margin="2,0,2,0" />
<TextBlock Text="Class ID:" Foreground="Gray" Margin="2,0,2,0" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock Text="{Binding DepartmentID}" Margin="2,0,2,0" />
<TextBlock Text="{Binding ClassID}" Margin="2,0,2,0" />
</StackPanel>
</Grid>
</StackPanel>
<StackPanel Grid.Column="3" HorizontalAlignment="Right">
<TextBlock Margin="2,0,0,2" FontSize="16" FontWeight="Bold" >
<Run Text="$" />
<Run Text="{Binding Price}" />
</TextBlock>
</StackPanel>
</Grid>
</Border>
Thanks to #gomi42 this worked;
<Style x:Key="autoBoxStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
I want to make a dynamic filling list that fill the screen what ever the content is
so here what I did:
first: the design
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="RED" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="AAAAAAAAAAAAA" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="CCCCC" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="GREEN" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
and the result was an item that fill the screen and doesn't matter in portrait or landscape
and to make it dynamic, simply I made a list of data template
<ListBox Grid.Row="1" Name="countersList" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="countersList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="{Binding index}" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding name}" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding count}" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="{Binding index}" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the result was a list that wrap it's size with it's content
so, how can I fix it, I want a list that fill the screen and it doesn't matter was it in landscape or portrait
The problem you are running into is that the item in the listbox isn't stretched.
A listbox item's size is NOT determined by the ItemTemplate but by the ItemContainerStyle and the size of the ListBox.
First add to the ListBox:
<ListBox HorizontalAlignment="Stretch" ...>
to make sure the ListBox itself is stretched horizontally. If you set it at Center it will only become as wide as its content/children request for.
Then add this to the ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
This ItemContainerStyle will cause all Items to be stretched to the width of the parent (ListBox's Item Panel)
I am trying to figure out how to implement the "Better" example of what is shown here:
Specifically what is used for "Indent" and "Spacing" headings. I assume its just a RibbonGroup header with the header on top but I can't figure out how to do that. Ideas?
It's just a TextBlock.
That appears to be directly from the WPF Source and Samples.
You'll find the following in UserControlWord.xaml which I think is the exact code that produces the entire Paragraph RibbonGroup in your Better: example. For non generic RibbonButtons and such... they usually just make their own grid of normal controls in the examples.
<ribbon:RibbonGroup Header="Paragraph" KeyTip="ZG">
<ribbon:RibbonGroup.Resources>
<!-- Vertical Separator-->
<Style TargetType="{x:Type ribbon:RibbonSeparator}" x:Key="RibbonSeparatorStyleKey">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
</Style>
<!-- Image -->
<Style TargetType="{x:Type Image}" x:Key="ImageStyle16Key">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
</Style>
</ribbon:RibbonGroup.Resources>
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupTemplateSizeDefinition>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Indent -->
<TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="0" Name="LeftIndentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="35"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Left:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IL"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Name="RightIndentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="35"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Right:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IR"/>
</Grid>
<!-- Separator -->
<ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>
<!-- Spacing -->
<TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="2" Name="BeforeSpacingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="Before:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SB"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="2" Name="AfterSpacingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<TextBlock Grid.Column="1" Text="After:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SA"/>
</Grid>
</Grid>
</DataTemplate>
</ribbon:RibbonGroupTemplateSizeDefinition>
<ribbon:RibbonGroupTemplateSizeDefinition>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Indent -->
<TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IL"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="IR"/>
</Grid>
<!-- Separator-->
<ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>
<!-- Spacing-->
<TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
<Grid Grid.Row="1" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SB"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
<ribbon:RibbonTextBox Grid.Column="2" KeyTip="SA"/>
</Grid>
</Grid>
</DataTemplate>
</ribbon:RibbonGroupTemplateSizeDefinition>
<ribbon:RibbonGroupTemplateSizeDefinition IsCollapsed="True"/>
</ribbon:RibbonGroup.GroupSizeDefinitions>
</ribbon:RibbonGroup>
I have this window:
My problem is that when the number is larger than 2 digits, it pushes the red rectangle to
the right. and I would like it to act like that:
The rectangle must not been pushed to the right.
This is my XAML:
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<TextBlock Text="1" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1" >
<TextBlock Text="1123" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
</StackPanel>
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="1" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="1123" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
</StackPanel>