DataTemplate With separator in StatusBar that has ItemSource

Question

So I have this 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>

Which returns a StatusBar that begings with a separator and has one item

Now I have an other StatusBar that has a dynamic list of items with a specific template.

  <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>

This is the result from the second status bar. The separators are totally different looking, one the color is black for the "static" separator and for the "dynamic" separator is white. Also the height is different.

Is there a way I can make a StatusBar that has an usercontrol as template and add separators between each item? I tried to add the separator inside the UserControl but the result is the same as you can see here, the separator being very small and now taking the full height of the StatusBar.

Answer 1

Is there a way I can make a StatusBar that has an usercontrol as template and add separators between each item?

You should use ItemContainerStyle to get the desired result:

<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>

then your ItemTemplate would simply become:

<StatusBar.ItemTemplate>
    <DataTemplate>
        <uc:StatusBarItem/>
    </DataTemplate>
</StatusBar.ItemTemplate>

Also, I have applied StatusBar.Separator style on Separator in the ItemContainerStyle to get the default status bar separator appearance.

Result:

Here is a link to docs for further reading on StatusBar default styles and templates.