Question

Probably I’m just missing something obvious, but I can’t get the image in my DataTemplate to align to the right in the Grid, so that when the window is stretched, the image is “pulled” to the right as well:

<Window.Resources>
    <DataTemplate x:Key="PersonTemplate" DataType="Minimal.Client.Person">
        <Border BorderBrush="Purple" BorderThickness="2" CornerRadius="2" Padding="5" Margin="5">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="200"/>
                    <ColumnDefinition Width="Auto" MaxWidth="200"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column ="0" Orientation="Horizontal" >
                    <TextBlock FontFamily="Verdana" FontSize="16" FontWeight="Bold" Text="{Binding LastName}" />
                    <TextBlock FontFamily="Verdana" FontSize="16" Text=", " />
                    <TextBlock FontFamily="Verdana" FontSize="16" Text="{Binding FirstName}" />
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Right">
                    <Border BorderBrush="Black" BorderThickness="1">
                        <Image Source="{Binding Picture}" Width="180" Height="150" />
                    </Border>
                </StackPanel>
            </Grid>
        </Border>
    </DataTemplate>
</Window.Resources>

Any suggestions?

Answer 1

I think the problem is that you have set a MaxWidth of 200 for the second column (where the Image is contained). Therefore, the column will not be any wider than 200 pixels and the two columns will not use the complete available space. If you insert another column in between the two columns and make this one star-sized, the Image will be right-aligned:

<Grid Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="200"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto" MaxWidth="200"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column ="0" Orientation="Horizontal" >
        <TextBlock FontFamily="Verdana" FontSize="16" FontWeight="Bold" Text="{Binding LastName}" />
        <TextBlock FontFamily="Verdana" FontSize="16" Text=", " />
        <TextBlock FontFamily="Verdana" FontSize="16" Text="{Binding FirstName}" />
    </StackPanel>
    <StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Right">
        <Border BorderBrush="Black" BorderThickness="1">
            <Image Source="{Binding Picture}" Width="180" Height="150" />
        </Border>
    </StackPanel>
</Grid>

This way, it works for me. However, you should be careful when using StackPanels. They always take as much space as they need. And if they are not given that much space, part of the content will simply be hidden.

gehho.