Window Commands Separators

[clodewyks]

I am receiving an issue after updating to ALPHA192 where a lot of un-necessary separators are being added to my RightWindowCommands, where it seems (and I might be wrong) that a separator is being added for every UIElement, even it is children.

See how my commands used to look:

And after the update:

 <Controls:MetroWindow.RightWindowCommands>
    <Controls:WindowCommands DataContext="{Binding ElementName=MainGrid, Path=DataContext}">

        <!--<TextBlock Text="{Binding SilentMessage}" VerticalAlignment="Center" Margin="5,0" Visibility="{Binding ShowSilentMessage, Converter={StaticResource BooleanToVisibilityConverter}}"/>-->

        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal" Margin="5,0">
            <Controls:MetroProgressBar IsIndeterminate="True" Visibility="{Binding SilentVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="White"/>
            <TextBlock Foreground="White" Margin="5,0" Text="{Binding SilentCaption}" VerticalAlignment="Center" Visibility="{Binding SilentVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        </StackPanel>

        <!--<StackPanel Orientation="Horizontal">-->
        <Button ToolTip="Changelog" Name="imgChangeLog"  Visibility="{Binding ChangeLogVisibility}">
            <Rectangle Width="15"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Uniform" Visual="{StaticResource New}"/>
                </Rectangle.OpacityMask>
            </Rectangle>
        </Button>

        <Button ToolTip="Notifications" Name="imgNotifications" >
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center" Margin="5,0" Text="{Binding NotificationCount}" Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <TextBlock.Style>
                        <Style>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.HasNotifications}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="AnimationBeginStoryboard">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0" Duration="0:0:1"
                           From="1.0" To="0.2" RepeatBehavior="Forever" AutoReverse="True"/>

                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.HasNotifications}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <PauseStoryboard  BeginStoryboardName="AnimationBeginStoryboard"/>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <Rectangle Width="15"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform" Visual="{StaticResource Message}"/>
                    </Rectangle.OpacityMask>
                    <Rectangle.Style>
                        <Style>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.HasNotifications}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="AnimationBeginStoryboard">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0" Duration="0:0:1"
                           From="1.0" To="0.2" RepeatBehavior="Forever" AutoReverse="True"/>

                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=DataContext.HasNotifications}" Value="False">
                                    <DataTrigger.EnterActions>
                                        <PauseStoryboard  BeginStoryboardName="AnimationBeginStoryboard"/>
                                    </DataTrigger.EnterActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Rectangle.Style>
                </Rectangle>
            </StackPanel>
        </Button>

        <Popup IsOpen="{Binding ShowNotifications}" Placement="Right" VerticalOffset="50" x:Name="DependantPopUp" PopupAnimation="Scroll" AllowsTransparency="True">
            <Notification:NotificationPanel x:Name="notificationPanel" MaxHeight="500"/>
        </Popup>

        <Button ToolTip="Compliments / Complaints&#x0a;Note: This is completely anonymous" Name="imgComplaint">
            <Rectangle Width="15"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Uniform" Visual="{StaticResource Drama}"/>
                </Rectangle.OpacityMask>
            </Rectangle>
        </Button>

        <Button ToolTip="{Binding Version}"  Name="imgUpdate">
            <Rectangle Width="15"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Uniform" Visual="{StaticResource Cloud}"/>
                </Rectangle.OpacityMask>
            </Rectangle>
        </Button>
        <Button ToolTip="Launchpad" Name="imgSettings">
            <Rectangle Width="15"
                       Height="15"
                       Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Uniform" Visual="{StaticResource Launchpad}"/>
                </Rectangle.OpacityMask>
            </Rectangle>
        </Button>
        <Button>
            <TextBlock  Text="{Binding NhbUser}" VerticalAlignment="Center" Margin="5,0" Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"/>
        </Button>
        <!--</StackPanel>-->

    </Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>

[punker76]

@crumbl3d this issue is a result of #2152
it's a breaking change... now all added stuff in WindowCommands are transformed to WindowCommandsItem... @crumbl3d can you look at this?

[nikolovjovan]

• Okay, so I see you use Panels here? There is no reason to use them since the WindowCommands control is an ItemsControl - a Panel. These panels cause troubles.
• The way separators worked previously is that a style was applied to every child that is a Button or ToggleButton. In the style a ControlTemplate was used to add a separator.
• Now I changed this so that every item is wrapped into a WindowCommandsItem which allowed me to hide the last separator without knowing the size of the Items list, and also allowed better style support for the items. No separators need to be added to the ControlTemplates anymore.
• The problem you are having is because you use Panels. Everything is wrapped inside it, so no separators are being created between its items. The extra separators probably come from the triggers you defined at the bottom of the items list.

So I'd suggest you try removing the Panels and keeping only the items that need to be separated and show me a screenshot. I will try to implement something that could bypass Panels, but in the meantime please do as I asked. 😄

[clodewyks]

Morning @crumbl3d ,

Please see updated code & screenshot.

Not sure if you are referring to the StackPanels, I have removed all but one which is required as I do not want the MetroProgressBar and TextBlock separated. The rest are all Buttons and one Popup. Am I misunderstanding you?

[nikolovjovan]

Great work @clodewyks! As I've said you just had to remove the unnecessary StackPanels. The basic principle is:

1 Child = 1 Item (1 Separator)

Only the main children have their separators. Items can be built however you want but if you want them separated then keep them out of Panels.
I see you removed the triggers and the extra separators are gone. If you must use them tell me and I'll try to bypass them completely.
Now I'll try to remove the ones that are still present for the invisible items!

[clodewyks]

@crumbl3d it would be brilliant if you could ignore the ones where the items are invisible as that seems to be the only issue I still have. Great work on Mahapps by the way. Thank you and I will be looking forward to the next update.