DataTemplate 在具有 ItemSsource 的状态栏中带有分隔符

Question

所以我有这个状态栏

  <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 的全部高度。

Answer 1

有没有办法可以制作一个具有用户控件的状态栏 模板并在每个项目之间添加分隔符？

您应该使用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>

另外，我在ItemContainerStyle 中的Separator 上应用了StatusBar.Separator 样式，以获得默认的状态栏分隔符外观。

结果：

这里是docs 的链接，用于进一步阅读 StatusBar 默认样式和模板。