wpf - DataTemplate 在具有 ItemSource 的 StatusBar 中带有分隔符
问题描述
所以我有这个状态栏
<StatusBar x:Name="RightSideStaticStatusBar" Grid.Column="2">
<StatusBar.Background>
<SolidColorBrush Color="AliceBlue" Opacity="0.5"></SolidColorBrush>
</StatusBar.Background>
<Separator></Separator>
<StatusBarItem HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Width="300">
</StatusBarItem>
</StatusBar>
它返回一个带有分隔符的状态栏,并且有一个项目
现在我有另一个状态栏,它有一个带有特定模板的动态项目列表。
<StatusBar x:Name="StatusBar" ItemsSource="{Binding}" Grid.Column="1">
<StatusBar.Background>
<SolidColorBrush Color="Red" Opacity="0.5"/>
</StatusBar.Background>
<StatusBar.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<uc:StatusBarItem/>
<Separator>
<Separator.LayoutTransform>
<RotateTransform Angle="90" />
</Separator.LayoutTransform>
</Separator>
</StackPanel>
</DataTemplate>
</StatusBar.ItemTemplate>
</StatusBar>
这是第二个状态栏的结果。分隔符的外观完全不同,“静态”分隔符的颜色为黑色,“动态”分隔符的颜色为白色。而且高度也不一样。
有没有办法可以制作一个具有用户控件作为模板的 StatusBar 并在每个项目之间添加分隔符?我尝试在 UserControl 中添加分隔符,但结果与您在此处看到的相同,分隔符非常小,现在占据了 StatusBar 的全部高度。
解决方案
有没有办法可以制作一个具有用户控件作为模板的 StatusBar 并在每个项目之间添加分隔符?
您应该使用ItemContainerStyle
来获得所需的结果:
<StatusBar.ItemContainerStyle>
<Style TargetType="StatusBarItem" BasedOn="{StaticResource {x:Type StatusBarItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="StatusBarItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<ContentPresenter />
<Separator Grid.Column="1" Style="{StaticResource {x:Static StatusBar.SeparatorStyleKey}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StatusBar.ItemContainerStyle>
那么您ItemTemplate
将简单地成为:
<StatusBar.ItemTemplate>
<DataTemplate>
<uc:StatusBarItem/>
</DataTemplate>
</StatusBar.ItemTemplate>
另外,我在 中应用了StatusBar.Separator
样式Separator
以ItemContainerStyle
获取默认的状态栏分隔符外观。
结果:
这是一个文档链接,用于进一步阅读 StatusBar 默认样式和模板。
推荐阅读
- ecmascript-6 - redux-saga:动作和事件通道之间的竞赛
- c - 简单地创建一个数据结构,它怎么会出现段错误?
- laravel - laravel 在子文件夹中找不到控制器
- php - PHP $_SESSION 总是丢失值,怎么了?
- android - 使用 CountDownTimer 更新 TextView
- angular - 获取加载失败:获取“视频 URL”。在 ngsw-worker.js:2607
- javascript - 变量被推送,但后来不存在
- javascript - 无法访问照片中的相机胶卷本机反应
- go - 结构类型作为映射键
- python - 从python有序字典中删除键的复杂性