Создайте квадратную рамку с изображением внутри, шириной и высотой, зависящими от равномерного столбца сетки. - PullRequest
Новая
       21

Создайте квадратную рамку с изображением внутри, шириной и высотой, зависящими от равномерного столбца сетки.

3 голосов
/ 11 января 2012

Я думаю, что это немного сложная проблема.

У меня есть ListBox, который должен представлять некоторые изображения, и каждое изображение должно быть помещено в прямоугольник или квадратную рамку.Это просто, я знаю.Дело в том, что в этом списке всегда должно быть по 3 элемента в строке, независимо от разрешения экрана или размера окна.

Чтобы получить его, я создал шаблон списка следующим образом: 

<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>

Проблема в том, что я получаю прямоугольную рамку вокруг изображения вместо квадратной рамки вокругListBoxItem.

Помните, что я не могу указать свойство width, потому что они должны зависеть от ширины столбца равномерной сетки.

У вас есть намеки?

Большое спасибо!

Ответы [ 2 ]

7 голосов
/ 11 января 2012

Удаление поля с границы и установка его на изображении, создает рамку вокруг изображения, которая в точности равна размеру элемента ListviewItem.См. Рисунок.

Если это не то, что вы ожидали, определите более четко. 

  <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"/>

РЕДАКТИРОВАТЬ:

Добавить VerticalContentAlignment="Stretch" кваш ListBox и изображения должны изменить размер должным образом.См. Рисунок ниже.

РЕДАКТИРОВАТЬ II:

Если вы хотите, чтобы изображения отображались в виде квадратов, необходимо установить для высоты границы текущую ширину: 

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

Border around images

1 голос
/ 11 января 2012

Попробуйте это 

<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>
...