5

I have a grid in WPF which is made of 4 rows along 2 columns where column 1 holds an Image control and column 2 holds 4 Textblocks. Problem is, the Image control sizes itself to the Image size and extends the listbox's entry too much [Its in a DataTemplate] and makes everything look distorted. I dont want to manually set a max height/width because i want the Image to size itself to the size of the 4 textblocks that are alongside it. Any ideas?

<DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding Logo, Converter={StaticResource BSConverter}}" Grid.Row="0" Grid.RowSpan="4" 
                           Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"/>
                    <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
                    <TextBlock Text="{Binding Author}" Grid.Row="1" Grid.Column="1"/>
                    <TextBlock Text="{Binding Version}" Grid.Row="2" Grid.Column="1"/>
                    <TextBlock Text="{Binding Description}" Grid.Row="3" Grid.Column="1"/>
                </Grid>
            </DataTemplate>

Thanks in advance

2 Answers 2

3

You can use Grid.IsSharedSizeGroup on the Parent ListBox to make sure all of your items get the same Width for the first Column like this

<ListBox ...
         Grid.IsSharedSizeScope="True">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="GroupA"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                ...

For the Image height problem, you could bind Height to the ActualHeight of the Parent Grid with a FallbackValue of 1.0 (to ensure the Height of the Image doesn't effect the Height of the Grid)

<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}"
       Grid.Row="0"
       Grid.RowSpan="4"
       Grid.Column="0"
       Stretch="Uniform" SnapsToDevicePixels="True"
       Height="{Binding RelativeSource={RelativeSource AncestorType=Grid},
                        Path=ActualHeight,
                        FallbackValue=1.0}"/>
12
  • I don't believe this is an issue with regards to the ListBox; granted the OP mentioned that it resides in a ListBox but I believe what the OP is referencing is the row height being modified within the Grid once an Image is added which spans those 4 rows, versus the Image adhering to the overall height and not increasing said height; since a ColumnDefinition does not even have a height property Dec 29, 2010 at 14:52
  • I am trying this right now, thanks :) @Aaron I am reffering to the column height as in the combined height of all of its rows :) Dec 29, 2010 at 14:54
  • @Aaron: I missread the question at first and then I updated my answer and didn't remove the first part since that might be a problem for the OP as well. Did you refer to my post before or after the update? Dec 29, 2010 at 14:58
  • @Drknezz: I got the wrong idea about your problem at first so maybe the first part doesn't apply. The second part will hopefully solve your problem though:) Should I remove the part about IsSharedSizeScope? Dec 29, 2010 at 15:03
  • @Meleak I was referring to the first portion; I had not seen the second portion... Dec 29, 2010 at 15:17
2

Modifying your containers slightly to make use of a StackPanel in conjunction with a Grid and referencing the StackPanel via ElementName binding should provide you the visuals you are looking for...

<DataTemplate>
    <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,8,0" Source="{Binding Logo, Converter={StaticResource BSConverter}}" 
                           Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True" 
           Height="{Binding ElementName=Contents, Path=ActualHeight}"/>

        <StackPanel VerticalAlignment="Top" Name="Contents" Grid.Column="1" Orientation="Vertical">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock Text="{Binding Author}"/>
            <TextBlock Text="{Binding Version}"/>
            <TextBlock Text="{Binding Description}"/>
        </StackPanel>
    </Grid>
</DataTemplate>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.