首页 > 解决方案 > 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 的全部高度。

标签: wpfstatusbaritemscontrol

解决方案


有没有办法可以制作一个具有用户控件作为模板的 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样式SeparatorItemContainerStyle获取默认的状态栏分隔符外观。

结果

结果显示状态栏分隔符

这是一个文档链接,用于进一步阅读 StatusBar 默认样式和模板。


推荐阅读