We Keep Coding

WPF MaterialDesign Dialog Host

I am building a WPF application and I would like to have custom MessageBox but I saw that is really tedious and I thought of using the DialogHost provided by MaterialDesign. The problem is that I can't get it to work the way I want it to so let me describe the current behaviour and the wanted one.
The current behaviour:
<materialDesign:ColorZone Grid.Column="1"
Grid.ColumnSpan="2"
Grid.Row="1"
Mode="Light"
Padding="16">
<DockPanel>
<materialDesign:DialogHost DockPanel.Dock="Right">
<Button x:Name="PowerButton"
ToolTip="{Binding PowerButtonToolTip, Source={StaticResource ResourceKey=ButtonsResources}}"
Style="{StaticResource MaterialDesignIconButton}"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
<Button.CommandParameter>
<StackPanel>
<TextBlock Text="TODO" />
<StackPanel Orientation="Horizontal"
Margin="0, 20, 0, 10">
<Button Width="90"
Height="30"
Margin="10, 0, 0, 0"
Style="{StaticResource MaterialDesignOutlinedButton}"
Click="PowerButton_Click">
OK
</Button>
<Button Width="90"
Height="30"
Margin="10, 0, 10, 0"
Style="{StaticResource MaterialDesignOutlinedButton}"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
CANCEL
</Button>
</StackPanel>
</StackPanel>
</Button.CommandParameter>
<materialDesign:PackIcon Kind="Power" />
</Button>
</materialDesign:DialogHost>
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="MenuButton"
Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
<TextBlock VerticalAlignment="Center"
Margin="16 0 0 0"
Text="{Binding MainViewTitle, Source={StaticResource ResourceKey=ViewsResources}}">
</TextBlock>
</StackPanel>
</DockPanel>
</materialDesign:ColorZone>
What happens is that when I'm clicking the PowerButton the DialogHost appears with the structure from the Button.CommandParameter. The issue with this is that the window doesn't get "disabled" (getting a little black and unclickable) while the dialogue is on.
I saw that to achieve this behaviour I need to but all the content of the window inside the DialogHost. But is it really so or I am misunderstanding something? Their example (see link) isn't really helpful because there seem to be other things running in the background. Moreover, the command materialDesign:DialogHost.OpenDialogCommand of the button that is opening the "Topmost dialogue host" seems limited to me.

Let's try something simple fo you to try at the first time.
The DialogHost is composed of two major parts
First everything that is displayed into your DialogHost, this have to be into one block (StackPanel, Grid, DockPanel...) that is the content of your DialogHost.
Second part is more like the context of your dialog, when you want to display it have to be somewhere to be displayed, another block (StackPanel, Grid, DockPanel...), the context is the place where your dialog will be once displayed, il will show centered and darken the rest of the block.
Now you have the main theory let's make a simple sample based on the sample given by the demo and your piece of code.
<materialDesign:DialogHost HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:DialogHost.DialogContent>
<StackPanel Margin="16">
<!-- HERE GOES YOUR CONTENT -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True"
Margin="0 8 8 0" Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>True</system:Boolean>
</Button.CommandParameter>
ACCEPT
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}"
IsCancel="True" Margin="0 8 8 0"
Command="materialDesign:DialogHost.CloseDialogCommand">
<Button.CommandParameter>
<system:Boolean>False</system:Boolean>
</Button.CommandParameter>
CANCEL
</Button>
</StackPanel>
</StackPanel>
</materialDesign:DialogHost.DialogContent>
<!-- START OF YOUR CONTEXT-->
<!-- END OF YOUR CONTEXT -->
</materialDesign:DialogHost>
So now you have the basis that may be enough for you to start enjoying.
A little more, your context need to be large enough to display what you put on your DialogHost so you can't put a whole dialog around a button, it is better to make it around something bigger, as a first try you should try on a new page to test this context :
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button x:Name="PowerButton" ToolTip="{Binding PowerButtonToolTip, Source={StaticResource ResourceKey=ButtonsResources}}"
Style="{StaticResource MaterialDesignIconButton}"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
</Grid>
The Buttons under the content are simply there if you desire to do an action, for example if the DialogHost is there for a modification or a choice where the user can say Yes or No then rename ACCEPT and CANCEL as you want. The "IsDefault" is there to make that it is this button that is considered as pressed if the user press Enter. Pressing a button automatically close the Dialog that is good to know.
And as the both ACCEPT and CANCEL are button you can affect a Click event that will be pretty useful for advanced using of the DialogHost.

Keep elements displayed in fullscreen UWP application

Below is my design containing media element, play, pause, full window and seeker.
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="250" Width="355" Margin="0,20,0,0"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
RealTimePlayback="True"
/>
<Grid x:Name="mediaGrid">
<Border VerticalAlignment="Bottom" Height="60" Background="Black"
Opacity="0.1">
</Border>
<Image x:Name="PlayIcon" Source="Assets/Play-icon.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Visibility="Collapsed" Tapped="PlayIcon_Tapped">
</Image>
<Image x:Name="PauseIcon" Source="Assets/Pause.png"
Height="35" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Margin="3,0,0,10" Tapped="PauseIcon_Tapped" Visibility="Visible">
</Image>
<TextBlock x:Name="duration" Foreground="White" VerticalAlignment="Bottom"
Margin="43,0,0,20">
</TextBlock>
<ProgressBar x:Name="videoProgressBar" VerticalAlignment="Bottom"
Margin="15 0 10 25" Foreground="DarkBlue" Background="Gray"
Width="180" Height="10" Minimum="0"
Maximum="{Binding Path=NaturalDuration.TimeSpan.TotalSeconds,
Mode=TwoWay,
ElementName=VideosMediaElement}"
Value="{Binding Path=Position.TotalSeconds, Mode=TwoWay,
ElementName=VideosMediaElement}"
Tapped="videoProgressBar_Tapped"
/>
<TextBlock x:Name="maximumDuration" Foreground="White" Margin="0,0,40,20"
VerticalAlignment="Bottom" HorizontalAlignment="Right">
</TextBlock>
<Image x:Name="ExpandEnabled" Source="Assets/Fullscreen.png"
Tapped="Zoom_Tapped" Height="35" Margin="0 0 3 10"
HorizontalAlignment="Right" VerticalAlignment="Bottom">
</Image>
</Grid>
If I click the full window icon on the right hand side, the video shows as full window with play, pause, seeker and full window button.
VideosMediaElement.IsFullWindow = true;
<MediaElement x:Name="VideosMediaElement" VerticalAlignment="Top"
Height="300" Width="360"
BufferingProgressChanged="VideosMediaElement_BufferingProgressChanged"
AreTransportControlsEnabled="True">
<MediaElement.TransportControls>
<MediaTransportControls IsCompact="True" IsZoomButtonVisible="False"
IsZoomEnabled="False"
IsPlaybackRateButtonVisible="True"
IsPlaybackRateEnabled="True"
/>
</MediaElement.TransportControls>
</MediaElement>
The video plays in full window, but play, pause and seeker are hiding when I set the IsWindowFull property. How to show those controls when the media element is in full window?

You can check the Live Visual Tree to check your Layout in the run-time:
When a MediaElement enters into the FullScreen mode, FullWindowMediaRoot will host the MeidiaElement and your mediaGrid will not be shown in this time. One method is as #Chris W. said use the TransportControls of MediaElement, but this is not available in Windows 8.1 app, as you developed a windows phone 8.1 app, there is no such problem.
Since custom transport control is not supported in WP8.1, for windows phone 8.1 app, you can manually set the Width and Height of MediaElement to App's size for example like this:
VideosMediaElement.Width = Window.Current.Bounds.Width;
VideosMediaElement.Height = Window.Current.Bounds.Height;
Since the app runs on WP8.1 as full screen mode, this method will also make the MediaElement looks like it is in full screen mode. And when you want to "exit from full screen mode", you can just reset the Height and Width properties.

Published app has no custom images when installed from store

My app is published in Windows Store now, but when I install it from the store, all of my custom images are missing. When I install via debugger from VisualStudio everything is fine. Is there maybe a missing resource note in appxmanifest for using custom images, by any chance?
Example:
<Button x:Name="myBtn" Grid.Row="0" Tapped="myBtn_Tapped" Style="{StaticResource ButtonStyleMenu}" BorderThickness="0" ClickMode="Press">
<StackPanel Orientation="Horizontal">
<Image x:Name="alert" Stretch="Fill" Source="ms-appx:///Assets/my/menu/btn.scale-100.png" Margin="10,0,0,0" Width="25" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="btnTxt" Text="ClickMe" FontSize="18" Foreground="White" Margin="10,0" VerticalAlignment="Center"/>
</StackPanel>
</Button>

You should not be looking for a qualified asset, like btn.scale-100.png. Instead, you should look for an unqualified asset like btn.png, and Windows will automatically load the right resource depending on the scale-factor of the OS.
This article does explain the concept at some depth: https://blogs.windows.com/buildingapps/2013/08/08/developing-world-ready-apps-in-xaml-part-2/

ProgressRing not showing in Flyout

A simple button with a flyout that contains a ProgressRing.
<Button Name="cmdStart" Content="Start" HorizontalAlignment="Center" Margin="5,0,5,0">
<Button.Flyout>
<Flyout Placement="Top">
<StackPanel Orientation="Vertical">
<ProgressRing IsActive="True" Width="30" Height="30"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Username" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtUsername" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Password" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtPassword" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<Button Name="cmdLoginProceed" Content="Login" Margin="5" Tapped="cmdLoginProceed_Tapped"/>
<Button Name="cmdLoginCancel" Content="Cancel" Margin="5" Tapped="cmdLoginCancel_Tapped"/>
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Tap on the button, the flyout pops up. No ProgressRing. Close the flyout and tap on the button again, flyout pops up and there it is!
If the flyout is replaced by a Grid or StackPanel (sets as Collapsed) and changed to Visible when tap on the button in button's code, ProgressRing shows as expected.
What have I done wrong?
The ProgressRing in code serves no meaning yet, just to highlight the issue
Edit: Is it possible issues with my installed tool & library version.
My setup:
Microsoft Visual Studio 2015 Version 14.0.23107.0 D14REL
Microsoft .NET Framework Version 4.6.00079
Visual C# 2015 Microsoft Visual C# 2015
Visual Studio Tools for Universal Windows Apps 14.0.23121.00 D14OOB

Is it possible to use a custom alert message in all pages by designing it in a single page in Windows Phone 8?

In my Windows Phone 8 application,there are nearly 45 pages. I want to display an alert message(customized) in all pages of my application. Is it possible to design it in a single page and call it in other pages?
Xaml design for alert message:
<Canvas x:Name="ExpiryPopUp_Container" Visibility="Collapsed" Margin="0,0,0,0" Background="Transparent" Width="800" Height="768">
<Canvas x:Name="ExpiryPopUp" Background="#FFFFFFFF" Height="180" Canvas.Left="410" Canvas.Top="320" Grid.Row="1" Width="300">
<Canvas Background="{StaticResource LeftNavBackground}" Height="48" Width="300">
<TextBlock FontSize="26" TextAlignment="Center" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Text="Alert" Width="300" Canvas.Top="10" Height="28"/>
</Canvas>
<TextBlock Text=" Session has expired." FontSize="22" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" TextAlignment="Center" Foreground="{StaticResource BlueText}" Canvas.Top="71" Width="300"/>
<Canvas x:Name="OkButton" Background="{StaticResource buttonBackground}" Height="32" Width="56" Canvas.Left="122" Canvas.Top="120" Tap="OkButton_Tap">
<TextBlock TextAlignment="Center" Text="Ok" FontSize="24" FontFamily="/Assets/Fonts/OpenSans-Regular.ttf#Open Sans Regular" Width="49" Height="26" Canvas.Top="2" Canvas.Left="3"/>
</Canvas>
</Canvas>
</Canvas>

Per above comments, you want to navigate. To do that from anywhere in your app, you can do:
(App.Current as App).RootFrame.Navigate(...)
I would caution against using a Canvas (anywhere!) becuase if you ever move to being a Universal App (Windows and Windows Phone 8.1) all your layout will be wrong on larger-screen devices. Or even if you decide to support landscape orientation, for that matter.
Un-parented popups won't rotate with the rest of the app; they will always be in Portrait mode. The code pointed to by that blog also shows a mechanism to host common UI inside the root frame so you don't need to use a popup (look at App.Xaml and the ApplyCustomFrameTemplate method in the .cs file).