We Keep Coding

C# MaterialDesign PopupBox Cascading

I have a WPF application (C#) thats using a Material Designs PopUpBox for its menu navigation, as per the following:-
<materialDesign:PopupBox Margin="10,0,0,0" PlacementMode="BottomAndAlignLeftEdges" StaysOpen="false" IsEnabled="{Binding IsSystemControlsEnabled}" Style="{DynamicResource template_NavigationMenu}" >
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Foreground="White" Height="25" Kind="Menu" Width="25"/>
</materialDesign:PopupBox.ToggleContent>
<StackPanel Width="150" >
<Button Command="{Binding ScreenCommand}" CommandParameter="Dashboard" Content="Dashboard" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDashboard" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator/>
<Button Command="{Binding ScreenCommand}" CommandParameter="Encrypt" Content="Encrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuEncrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
<Button Command="{Binding ScreenCommand}" CommandParameter="Decrypt" Content="Decrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDecrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
</StackPanel>
</materialDesign:PopupBox>
Is there a way to cascade this menu and add an extra layer? So for example, if I was to select or hover over the button for Encryption, it would they give me a new popupbox, just to the right, with some new options relating to encryption?
I'm trying to find something like this https://m2.material.io/components/menus (first image) but can't find anything relating to C# / XAML, so looking for some inspiration from the experts...
Any help is greatly appreciated.
Thank you

UWP CommandBar SecondaryCommand collides with AppBarButton Flyout

I have an AppBarButton which displays a MenuFlyout when clicked. And that button is in a CommandBar.
However, after it is collapsed to the MoreButton due to the overflow, the AppBarButton's Flyout becomes hard to click. This is because the MoreButton creates a Flyout and the second click on the AppBarButton hides both Flyout.
So how can I resolve this problem?
Preferably, I want the AppBarButton to be converted to a MenuFlyoutSubItem, but I don't know how to do that.
Another problem about the overflow is that, although I have set the CornerRadius of the MoreButton to be 20 in its style, it is still a rectangle indeed. What is wrong?
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
CornerRadius="20"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButton}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="{ThemeResource AppBarExpandButtonCircleDiameter}"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph="" />
</Button>

This is Flyout light dismiss behavior and it's by design, for more please refer this document. For your requirement please avoid put the MenuFlyout in to MoreButton's flyout. I think you could place all the items in the SecondaryCommands and use AppBarSeparator to split into different areas.
<CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="ReShare" Label="Share"/>
<AppBarButton Icon="Edit" Label="Edit"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="S" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="Add" Label="Button 1">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="N" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="Delete" Label="Button 2">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Key="Delete" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarSeparator />
<AppBarButton Icon="FontDecrease" Label="Button 3">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="Subtract" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="FontIncrease" Label="Button 4">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="Add" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
Another problem about the overflow is that, although I have set the CornerRadius of the MoreButton to be 20 in its style, it is still a rectangle indeed. What is wrong
I used the following style and the CornerRadius works well
<Style TargetType="CommandBar">
.....
<Button x:Name="MoreButton"
Background="Red"
CornerRadius="20"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource EllipsisButtonRevealStyle}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
VerticalAlignment="Top"
Grid.Column="1"
Control.IsTemplateKeyTipTarget="True"
IsAccessKeyScope="True"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon x:Name="EllipsisIcon"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph=""
Height="{ThemeResource AppBarExpandButtonCircleDiameter}" />
</Button>
.....
</Style>
Update
<Border Grid.Column="1" CornerRadius="20">
<Button
x:Name="MoreButton"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButton}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}"
>
<FontIcon
x:Name="EllipsisIcon"
Height="{ThemeResource AppBarExpandButtonCircleDiameter}"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph=""
/>
</Button>
</Border>

How do I solve this strange DropShadow issue in UWP Composition?

I'm getting undesirable effects when using a drop shadow in composition. To replicate this problem, follow these steps:
Step 1: create a new UWP project and target Windows 10 Fall Creators Update (10.0; Build 16299)
Step 2: copy the following into MainPage.xaml
<Page x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Canvas x:Name="_shadow" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Canvas x:Name="_shadowSource" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left">
<Ellipse Width="50" Height="50" Fill="DarkOrange" Canvas.Top="50" Canvas.Left="50"/>
<Ellipse Width="50" Height="50" Fill="Aquamarine" Canvas.Top="100" Canvas.Left="100"/>
<Ellipse Width="50" Height="50" Fill="Crimson" Canvas.Top="150" Canvas.Left="150"/>
<Ellipse Width="50" Height="50" Fill="BlueViolet" Canvas.Top="200" Canvas.Left="200"/>
<Ellipse Width="50" Height="50" Fill="DarkGreen" Canvas.Top="250" Canvas.Left="250"/>
<Ellipse Width="50" Height="50" Fill="Gold" Canvas.Top="300" Canvas.Left="300"/>
<Ellipse Width="50" Height="50" Fill="MediumAquamarine" Canvas.Top="350" Canvas.Left="350"/>
<Ellipse Width="50" Height="50" Fill="Violet" Canvas.Top="400" Canvas.Left="400"/>
<Ellipse Width="50" Height="50" Fill="LightSeaGreen" Canvas.Top="450" Canvas.Left="450"/>
</Canvas>
</Grid>
</Page>
Step 3: copy the following into MainPage.xaml.cs
using System.Numerics;
using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Hosting;
namespace App1
{
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
var compositor = Window.Current.Compositor;
var shadow = compositor.CreateDropShadow();
var layer = compositor.CreateLayerVisual();
shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;
layer.Shadow = shadow;
layer.Size = new Vector2(500, 500);
var visual = ElementCompositionPreview.GetElementVisual(_shadowSource);
layer.Children.InsertAtBottom(visual);
ElementCompositionPreview.SetElementChildVisual(_shadow, layer);
}
}
}
The contents of _shadowSource is moved to a new layer with a shadow set as InheritFromVisualContent. When the app loads, you'll see the shadows render fine, but resizing the app creates visual glitches.
Here's what happens when you comment out the line //layer.Shadow = shadow;
What's happening here? Why does a shadow cause this?

When your window height is less than 500, the _shadowSource height is still 500 because you have Width="500" Height="500" in your XAML. So it’s clipped and only upper portion is visible.
But you add your shadow to another element named _shadow. This one doesn’t have fixed size, so it resizes to the size of your window, i.e. no clipping happens. That’s why your circles get distorted to ellipses, and you see these nasty artifacts in the lower portion of your window — if your shadow would be laid out correctly, these parts of the layer would be clipped away and invisible.

I used the DropShadowPanel control of UWP Community Toolkit to apply drop shadow for the Ellipse. It worked well.
You could try the following:
<Page
...
xmlns:control="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
>
<Canvas VerticalAlignment="Top" HorizontalAlignment="Left">
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="50" Canvas.Left="50"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="DarkOrange" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="100" Canvas.Left="100"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="Aquamarine" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="150" Canvas.Left="150"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="Crimson" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="200" Canvas.Left="200"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="BlueViolet" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="250" Canvas.Left="250"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="DarkGreen" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="300" Canvas.Left="300"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="Gold" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="350" Canvas.Left="350"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="MediumAquamarine" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="400" Canvas.Left="400"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="Violet" />
</control:DropShadowPanel>
<control:DropShadowPanel BlurRadius="4.0" Canvas.Top="450" Canvas.Left="450"
ShadowOpacity="0.7"
OffsetX="5.0"
OffsetY="5.0"
Color="Black">
<Ellipse Width="50" Height="50" Fill="LightSeaGreen" />
</control:DropShadowPanel>
</Canvas>
I check its source code, I found that it will update shadow size and other things when the app window is resized. So, maybe, it's the key point. You could
refer to its source code to extend your own code. Or you could directly use the DropShadowPanel control.

panorama item swipe from left to right

I want to make an Arabic windows phone 8 app , so i need to make my panorama view to swipe from left to right (The opposite direction in English language) i tried this
protected override void OnNavigatedTo(NavigationEventArgs e)
{
MainPanorama.DefaultItem = MainPanorama.Items[1];
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
}
but the title goes the opposite direction , anyone have an idea ?

If you want that next panorama item seems to be on left, then you can play with CompositeTransforms. Something like this:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PanoramaTitleTemplate">
<TextBlock Text="{Binding}"
FontSize="48"
Margin="12,24"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1" />
</TextBlock.RenderTransform>
</TextBlock>
</DataTemplate>
<DataTemplate x:Key="PanoramaItemHeaderTemplate">
<TextBlock Text="{Binding}"
FontSize="52"
MinWidth="380"
TextAlignment="Right">
</TextBlock>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:Panorama Title="Panorama"
RenderTransformOrigin="0.5,0.5"
TitleTemplate="{StaticResource PanoramaTitleTemplate}">
<phone:Panorama.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:Panorama.RenderTransform>
<phone:PanoramaItem Header="Header1"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkBlue" />
</phone:PanoramaItem>
<phone:PanoramaItem Header="Header2"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkCyan" />
</phone:PanoramaItem>
<phone:PanoramaItem Header="Header3"
RenderTransformOrigin="0.5,0.5"
HeaderTemplate="{StaticResource PanoramaItemHeaderTemplate}">
<phone:PanoramaItem.RenderTransform>
<CompositeTransform ScaleX="-1" />
</phone:PanoramaItem.RenderTransform>
<Grid Background="DarkGoldenrod" />
</phone:PanoramaItem>
</phone:Panorama>
</Grid>

will the solution is very easy , there is a property on the panorama control named "FlowDirection" you change it like that
<phone:Panorama x:Name="MainPanorama" FlowDirection="RightToLeft">

Vertical separator in WPF Ribbon

How can I add Vertical separator to WPF Ribbon, to RibbonGroup? I have tried something like that, but i got horizontal separator istead of vertical.
<r:RibbonGroup>
<r:RibbonButton Command="{StaticResource SomeButton}" />
<r:RibbonSeparator></r:RibbonSeparator>
<r:RibbonToggleButton IsChecked="False" Command="{StaticResource AnotherButton}"/></r:RibbonToggleButton>
</r:RibbonGroup>
So how can I make vertical separator?

This is how I would do it.
<ribbon:RibbonGroup.Resources>
<!-- Vertical Separator-->
<Style TargetType="{x:Type ribbon:RibbonSeparator}"
x:Key="KeyRibbonSeparatorVertical">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
</Style>
</ribbon:RibbonGroup.Resources>

It looks like this doesn't work in the latest version (3.5.40729.1) anymore. The RibbonSeparator also doesn;t work, but you can use:
<Ribbon:RibbonControlGroup Height="55" Margin="5" Width="1" MinHeight="55" MaxWidth="1"/>

You can wrap what you have in a RibbonGroup, a vertical separator is created to the right of the group.
All I did was wrapped the first button in a RibbonGroup.
<ribbon:RibbonTab x:Name="HomeTab"
Header="Home">
<ribbon:RibbonGroup x:Name="Group1"
Header="Group1">
<ribbon:RibbonGroup>
<ribbon:RibbonButton x:Name="Button1"
LargeImageSource="Images\LargeIcon.png"
Label="Button1" Margin="-5" />
</ribbon:RibbonGroup>
<ribbon:RibbonButton x:Name="Button2"
SmallImageSource="Images\SmallIcon.png"
Label="Button2" />
<ribbon:RibbonButton x:Name="Button3"
SmallImageSource="Images\SmallIcon.png"
Label="Button3" />
<ribbon:RibbonButton x:Name="Button4"
SmallImageSource="Images\SmallIcon.png"
Label="Button4" />
</ribbon:RibbonGroup>
</ribbon:RibbonTab>

You can use a RibbonLabel, which can host any control in a RibbonGroup. It comes in very handy!
For a vertical line separator, you can try this:
<ribbon:RibbonLabel>
<Rectangle Height="56" Margin="2,0" Stroke="Silver"/>
</ribbon:RibbonLabel>
(Of course, you can style it as you see fit for the app..)

Works with me-
<my:RibbonSeparator Margin="5,0" Width="70" BorderBrush="Navy" BorderThickness="2">
<my:RibbonSeparator.RenderTransform>
<RotateTransform Angle="90" />
</my:RibbonSeparator.RenderTransform>
</my:RibbonSeparator>

This worked for me:
<Border Width="1" Margin="3" Height="175" Visibility="Visible" Background="#FFB9C9DA" />