Row height don't include scrollviewer ability - wpf

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.

Related

WPF ComboBox with multiple ItemsPresenter

I need to create a custom ComboBox with 2 ItemsPresenter but I don't know how to set the ItemsPresenter where to add and remove items.
I have tried to get the ItemsPresenter:
ItemsPresenter itemsPresenter = (ItemsPresenter)comboBoxAlbum.FindName("ItemsPresenterAlbum");
but I don't know how to get the Items collection.
This is how I have modified the Popup part:
<Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#FF929CA4">
<ScrollViewer Background="#FF929CA4">
<Grid x:Name="ToolBar" SnapsToDevicePixels="True" Background="#FF929CA4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="btnStretchNone" MouseUp="btnStretch_MouseUp" Grid.Column="0" Background="{Binding BtnStretchNone}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchNone.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchFill" MouseUp="btnStretch_MouseUp" Grid.Column="1" Background="{Binding BtnStretchFill}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchFill.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchUniform" MouseUp="btnStretch_MouseUp" Grid.Column="2" Background="{Binding BtnStretchUniform}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchUniform.png"/>
</StackPanel>
<StackPanel x:Name="btnStretchUniformFill" MouseUp="btnStretch_MouseUp" Grid.Column="3" Background="{Binding BtnStretchUniformFill}" Style="{DynamicResource StakPanelEffect}">
<Image Width="32" Height="32" Margin="5" Source="Resources/StretchUniformFill.png"/>
</StackPanel>
<StackPanel x:Name="btnSettings" MouseUp="btnSettings_MouseUp" Grid.Column="4" Background="{Binding BtnStretchFrame}" Style="{DynamicResource StakPanelEffect}" IsEnabled="False">
<Image Width="32" Height="32" Margin="5" Source="Resources/SettingsB.png"/>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
<Grid Grid.Row="1">
<TabControl Height="{Binding ActualHeight, ConverterParameter=-42, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}">
<TabItem Header="Albums">
<ScrollViewer x:Name="DropDownScrollViewerAlbum">
<Grid x:Name="gridAlbum" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvasAlbum" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRectAlbum" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ConverterParameter=-72, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ConverterParameter=-8, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenterAlbum" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</TabItem>
<TabItem Header="Slides">
<ScrollViewer x:Name="DropDownScrollViewerSlide">
<Grid x:Name="gridSlide" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvasSlide" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRectSlide" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ConverterParameter=-72, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ConverterParameter=-8, Converter={StaticResource AdditionConverter}, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenterSlide" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>
</Grid>
</Grid>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
There are 2 ItemsPresenter (ItemsPresenterAlbum, ItemsPresenterSlide). How can I add items to a specific ItemsPresenter? Using the Items.Add() it add only to the second ItemsPresenter.

Bind button command in listboxItem

I want to bind a button command from a listbox item. But my code not work. Can you help me?
My item template definition:
<UserControl.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</UserControl.Resources>
And my listbox declaration:
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Thank you for your help.
It worked fine for me
XAML:
<Window.Resources>
<DataTemplate x:Key="MemberList">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{DynamicResource appbar_user}" Height="30" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding EMail}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Button Grid.Column="2" Command="{Binding DataContext.CloseButton,RelativeSource={RelativeSource AncestorType=Window, AncestorLevel=1}}" Grid.Row="0" Grid.RowSpan="2" Width="25" Height="25" VerticalAlignment="Center" IsDefault="False" Content="X">
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid Height="200" Width="200" VerticalAlignment="Center">
<ListBox Margin="0,0,10,0" Grid.Column="0" Grid.Row="2" x:Name="_ownersList" ItemsSource="{Binding GroupOwners}" ItemTemplate="{DynamicResource MemberList}" >
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="Button.Click" Handler="Button_Click"/>
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</Grid>
ViewModel
private ICommand closeButton;
public ICommand CloseButton
{
get
{
if (this.closeButton == null)
{
this.closeButton = new RelayCommand<object>(this.ExecuteCloseButton);
}
return this.closeButton;
}
}
private void ExecuteCloseButton(object err)
{
}

How to change insert direction to ItemsControl

I have a control - ItemsControl that was binding to ObservableCollection of a simple model,
I want that it's itemscontrol will have a capability to insert dircetion from bottom to top, How to i can implement that?
Currently, Every insertion to itemscontrol starts from the top to bottom, but i want to change that..
<Window >
<Window.Resources>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}" >
</ItemsControl>
</Grid>
The solution is override ItemsControl's ItemsPanel as follows:
<Window >
<Window.Resources>
<ScaleTransform ScaleY="-1" x:Key="Transform"/>
<DataTemplate x:Key="ModelTemplate" DataType="Model:Model">
<Grid
LayoutTransform="{StaticResource Transform}"
Tag="{Binding Path=Id}"
Background="Transparent">
<Border
Name="border"
Background="#2a3345"
BorderThickness="0"
CornerRadius="10"
Margin="10">
<Border.Effect>
<DropShadowEffect
ShadowDepth="0"
Opacity="0.8"
BlurRadius="10"/>
</Border.Effect>
<Grid
Height="100"
Width="280"
Margin="6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Text="{Binding Path=Title}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
FontSize="14"
FontWeight="Bold"
VerticalAlignment="Center"
Margin="2,4,4,2"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="{Binding Path=Message}"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display"
Foreground="White"
FontFamily="Arial"
VerticalAlignment="Center"
Margin="2,2,4,4"
TextWrapping="Wrap"
TextTrimming="CharacterEllipsis"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplateVerticalAlignment">
<StackPanel VerticalAlignment="Bottom" LayoutTransform="{StaticResource Transform}"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<ItemsControl
FocusVisualStyle="{x:Null}"
ItemsSource="{Binding SimpleCollection}"
ItemTemplate="{StaticResource ModelTemplate}"
ItemsPanel="{StaticResource ItemsPanelTemplateVerticalAlignment}"/>
</Grid>
</Window>
The order of items in ItemsControl is the same as in ObservableCollection. Thus, if you do Collection.Insert(0, item), new item in ItemsControl will appear on the top.

Listbox ItemTemplate not rendering correctly

I have a listbox as defined below. Any idea what I need to do to get the border to display? Currently it looks like:
When it should look like:
<ListBox
Grid.Row="1"
ItemsSource="{Binding Path=ProfessionalsView}"
Style="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4">
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock>
<Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image>
</Grid>
</HeaderedContentControl.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock>
<TextBlock Grid.Row="1" Text="Forename"></TextBlock>
<TextBlock Grid.Row="2" Text="Work Phone"></TextBlock>
<TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock>
<TextBlock Grid.Row="4" Text="Email"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock>
</Grid>
</HeaderedContentControl>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Your border:
<Border BorderThickness="4">
Has no BorderBrush defined. Therefore there's nothing to paint the outlines with. Try
<Border BorderThickness="4" BorderBrush="Black">
You need to set the background Linear Gradiant color for Header. and a Border for you Contents. try below one.
<ListBox
Grid.Row="1"
ItemsSource="{Binding Path=ProfessionalsView}"
Style="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="4">
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFD1D0D0" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock Margin="9,5,29,5" Text="{Binding Path=FormattedName}"></TextBlock>
<Image Margin="0,2.5,9,2.5" HorizontalAlignment="Right" Source="/BluBrik.Workflow;component\Images/FlagComplete_16.png" Width="16" Height="16"></Image>
</Grid>
</HeaderedContentControl.Header>
<Border BorderBrush="DarkGray" BorderThickness="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="9,5,5,2.5" Text="Surname"></TextBlock>
<TextBlock Grid.Row="1" Text="Forename"></TextBlock>
<TextBlock Grid.Row="2" Text="Work Phone"></TextBlock>
<TextBlock Grid.Row="3" Text="Mobile Phone"></TextBlock>
<TextBlock Grid.Row="4" Text="Email"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Margin="9,5,9,2.5" Text="{Binding Path=Surname}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Path=Forenames}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding Path=WorkPhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding Path=MobilePhone}"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding Path=EmailAddress}"></TextBlock>
</Grid>
</Border>
</HeaderedContentControl>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

WPF Alignment problems

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>

Resources