我已经将一个 List 从我的代码隐藏绑定到一个 ListBox，但我很难对外观进行样式化以获得我想要的。我想一次显示最多 8 张图像，但不向下滚动就不会超过这个。当窗口调整大小时，我希望图像大小随之缩放，但仍然显示不超过 8 个。这是我当前的 XAML：<ListBox ItemsSource="{Binding PictureImagesList}"> <ListBox.Template> <ControlTemplate TargetType="ListBox"> <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> <ItemsPresenter/> </ScrollViewer> </ControlTemplate> </ListBox.Template> <ListBox.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="4" HorizontalAlignment="Center" VerticalAlignment="Top" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Image Source="{Binding}"/> </DataTemplate> </ListBox.ItemTemplate> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}" > <Grid Background="{TemplateBinding Background}"> <Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="{TemplateBinding BorderBrush}"> <ContentPresenter /> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="BorderBrush" Value="Yellow" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle></ListBox>这是此 XAML 生成的图片。如您所见，图像太大了，我们只看到第二行的上半部分。如果我弄乱了 ListBoxItem 边距，我可以让它们变小，但这并不理想，因为它只有在屏幕分辨率保持不变的情况下才有效。
2 回答
白板的微信
TA贡献1883条经验 获得超3个赞
将您的图像尺寸设置为相同并使用 WrapPanel 代替：
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Margin="5" >
<Image Source="{Binding}" Stretch="Uniform" Width="400" Height="400"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
或者，如果您想要固定数量的列，则根本不指定图像尺寸，而是使用 UniformGrid：
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Margin="5" >
<Image Source="{Binding}" Stretch="Uniform" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
更新：我现在有点不知所措，无法准确了解您要做什么，您发布的图片与您的描述不符。如果您希望面板是方形的，并且图像可以均匀地放大到它们周围并带有细边框，那么您必须做一些事情：
1）将您的 ListBoxItem ControlTemplate 更改为具有透明背景的边框和其中的 ContentPresenter。这将确保您的黄色边框不会填满整个框，并且框的其余部分在选中时不会突出显示，但您仍然可以单击它的任意位置来选择它。
2）将您的 ItemTemplate 更改为网格（以便填充所有可用空间），边框居中并带有填充（以便您在选择时能够看到黄色边框），然后将您的 Image里面的内容，但换行。
这应该做的工作：
<Style TargetType="{x:Type ListBox}" x:Key="PictureListBoxStyle">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid Margin="5">
<Border Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Source="{Binding}" Stretch="Uniform" />
</Border>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}" >
<Border Background="Transparent">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
如果仍然不是，那么您需要更清楚地定义您的要求。
白衣非少年
TA贡献1155条经验 获得超0个赞
您可以使用 UniformGrid 作为 ItemsPanel 与适当的HorizontalAlignment和VerticalAlignment。还要从 DataTemplate 中删除多余的 Border 元素。
<ListBox ItemsSource="{Binding PictureImagesList}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Width="200" Height="200" Margin="5" Source="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
更新：为了使黄色选择边框直接围绕图像，请使用如下所示的 ListBoxItem 样式。要将图像缩放到完整 ListBox 宽度的（一小部分），请添加适当的 ControlTemplate。
<ListBox ItemsSource="{Binding PictureImagesList}">
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ScrollViewer HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="LightGray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}" >
<Grid Background="{TemplateBinding Background}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="5"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
- 2 回答
- 0 关注
- 141 浏览
添加回答
举报
0/150
提交
取消