WPF textBlock expansion inside a layout

Question

I have the following XAML code:

    <DataTemplate x:Key="TileViewDT">
        <DockPanel>
            <StackPanel Height="40.5" DockPanel.Dock="Right" Margin="5,2,5,2" VerticalAlignment="Bottom">
                <TextBlock x:Name="Name" TextWrapping="Wrap" Text="{Binding XPath=@Name}" Width="132" />
                <TextBlock x:Name="Size" Foreground="DarkGray" TextWrapping="Wrap" Text="{Binding XPath=@Size}" />
            </StackPanel>
            <Image x:Name="Img" Source="BtnImg/Computer.png" Stretch="Fill" Margin="10,0,5,0" Width="48" Height="48"/>
        </DockPanel>
    </DataTemplate>

Output:

I'm trying to get the same look of Windows Explorer as much as possible, So I want to keep both of the TextBlocks "Name" and "Size" in the center when the text is short and when the name text's length is longer than the item space it goes up (by 1 line maybe) to get this look :

So how would I be able to do that?

Answer 1

I think in Stackpanel instead of setting Height you should set MaxHeight and VerticalAlignment property value should be Center instead of Bottom and that should do your work:

<DataTemplate x:Key="TileViewDT">
    <DockPanel>
        <StackPanel MaxHeight="40.5" DockPanel.Dock="Right" Margin="5,2,5,2" VerticalAlignment="Center">
            <TextBlock x:Name="Name" TextWrapping="Wrap" Text="{Binding XPath=@Name}" Width="132" />
            <TextBlock x:Name="Size" Foreground="DarkGray" TextWrapping="Wrap" Text="{Binding XPath=@Size}" />
        </StackPanel>
        <Image x:Name="Img" Source="BtnImg/Computer.png" Stretch="Fill" Margin="10,0,5,0" Width="48" Height="48"/>
    </DockPanel>
</DataTemplate>

Hope it works !!!