Create a square border, with image inside and width and height dependent to uniform grid colum

Question

I think this is a little tricky problem.

I have a ListBox that must present some images and each image must be put inside a rectangle or a square border. This is simple, I know. The fact is that this listbox must show always 3 elements per row, whether the screen resolution or window size.

In order to obtain it I've templated the listbox like this:

<ListBox Grid.Column="2" Grid.Row="1" x:Name="_productsLB" SelectedIndex="0"
             ItemsSource="{Binding Products}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
             HorizontalContentAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="3" Rows="4"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
                    Width="Auto" Height="Auto" HorizontalAlignment="Stretch">
                    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>                        
                </Border>                    
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

The problem is that I obtain a rectangular border around the image instead of a square border "around" the listboxitem.

Remember that I can't specifiy width property because they must be dependent to the uniform grid column width.

Do you have some hints?

Thank you so much!

Answer 1

Removing the Margin from the border and setting it on the Image, creates a Border around the Image which is exactly as big as a ListviewItem is. See picture.

If that is not what you expected, please define more clearly.

  <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8"
          Width="Auto" Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" 
          HorizontalAlignment="Stretch">
    <Image Source="{Binding ImagePath}" Stretch="Uniform"/>

EDIT:

Add VerticalContentAlignment="Stretch" to your ListBox and the images should resize properly. See picture below.

EDIT II:

If you want the images to appear as squares, you have to set the Border's Height to its current Width:

Height="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}" 

Answer 2

Try this

<ListBox Grid.Column="2" Grid.Row="1" x:Name="_productsLB" SelectedIndex="0" 
         ItemsSource="{Binding Products}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         HorizontalContentAlignment="Stretch"> 
    <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
            <UniformGrid Columns="3" Rows="4"/> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <Grid>
            <Border BorderThickness="1" Background="White" BorderBrush="Black" Margin="8" 
                Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" Height="="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}}" > 
                <Image Source="{Binding ImagePath}" Stretch="Uniform" />                         
            </Border>
            </Grid>                    
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>