我已經(jīng)將一個(gè) List 從我的代碼隱藏綁定到一個(gè) ListBox，但我很難對(duì)外觀進(jìn)行樣式化以獲得我想要的。我想一次顯示最多 8 張圖像，但不向下滾動(dòng)就不會(huì)超過這個(gè)。當(dāng)窗口調(diào)整大小時(shí)，我希望圖像大小隨之縮放，但仍然顯示不超過 8 個(gè)。這是我當(dāng)前的 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 邊距，我可以讓它們變小，但這并不理想，因?yàn)樗挥性谄聊环直媛时３植蛔兊那闆r下才有效。
2 回答
白板的微信
TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊
將您的圖像尺寸設(shè)置為相同并使用 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>
或者，如果您想要固定數(shù)量的列，則根本不指定圖像尺寸，而是使用 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>
更新：我現(xiàn)在有點(diǎn)不知所措，無法準(zhǔn)確了解您要做什么，您發(fā)布的圖片與您的描述不符。如果您希望面板是方形的，并且圖像可以均勻地放大到它們周圍并帶有細(xì)邊框，那么您必須做一些事情：
1）將您的 ListBoxItem ControlTemplate 更改為具有透明背景的邊框和其中的 ContentPresenter。這將確保您的黃色邊框不會(huì)填滿整個(gè)框，并且框的其余部分在選中時(shí)不會(huì)突出顯示，但您仍然可以單擊它的任意位置來選擇它。
2）將您的 ItemTemplate 更改為網(wǎng)格（以便填充所有可用空間），邊框居中并帶有填充（以便您在選擇時(shí)能夠看到黃色邊框），然后將您的 Image里面的內(nèi)容，但換行。
這應(yīng)該做的工作：
<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貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
您可以使用 UniformGrid 作為 ItemsPanel 與適當(dāng)?shù)腍orizontalAlignment和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>
更新：為了使黃色選擇邊框直接圍繞圖像，請(qǐng)使用如下所示的 ListBoxItem 樣式。要將圖像縮放到完整 ListBox 寬度的（一小部分），請(qǐng)?zhí)砑舆m當(dāng)?shù)?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 關(guān)注
- 172 瀏覽
添加回答
舉報(bào)
0/150
提交
取消