Question

I am having some problems with a menu that is displayed as tabs (displayed vertically on the left side)

I have defined a headertemplate that defines a grid consisting of two columns where the first holds a textblock with the text retrieved via binding. The second column holds an image whose visibility is tied to a property – this image is used by validation and shown when data entered in another view has been validated.

The problem I have is getting the columns to share the same width. Example:

Text1| Image
MuchLongerText| Image

This looks a bit wonky and so am trying to get the Images to line up but can’t seem to do this. The HeaderTemplate has a datatemplate specified as below

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Name}"  HorizontalAlignment="Left" VerticalAlignment="Center"/>

<Image Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="20" Height="20"  x:Name="ValidationImage" Source="/Images/validationimage.bmp"/> </Grid>

I’ve tried putting it in a stackpanel and using sharedsize but no luck. Any help with this would be much appreciated!
Cheers
/Sakic21

Answer 1

Take a look at the Grid.IsSharedSizeScope and DefinitionBase.SharedSizeGroup properties.