We Keep Coding

MaterialDesign- Flipper WPF: Alignment & Scalling is skew.

I'm using the Material Design in a WPF XAML application, I've got this section of code bellow, when the grid is outside of a "materialDesign:Flipper" it all renders correctly; ie- it grows/stretch's correctly with the size of the window and it stacks nicely inside of the StackPanel.
However, as soon as I place this code inside of a Flipper, the scaling and positioning becomes skewed. If I start to change the size of the window it will resize funnily and will not stack nicely. Please see both the image and video bellow for more info. Thank you.
Please note all this code is contained within side a "StackPanel", the intention is such that they can be copied and pasted multiple times.
Working Code outside a Flipper:
<Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
Broken Code, inside a Flipper:
<materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
<materialDesign:Flipper.FrontContent>
Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
</materialDesign:Flipper.FrontContent>
<materialDesign:Flipper.BackContent>
<Grid Height="200" Background="{Binding BackColour}">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
</Grid>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
Example Image of render
YouTube Video Demonstration - The one highlighted in red is flipper.
Thank you for any help.

XAML can't get text from label

I'm getting such error
The name 'ScoreBtn' does not exist in the current context
and
The name 'LvlBttn' does not exist in the current context
on c# side but I can get text of Label x:Name="Lines". Where is mistake and how can I fix it?
Thanks for any help,
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Button x:Name="Score" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label x:Name="ScoreBtn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8" Content="Score"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="level" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label Content="Level 1" x:Name="LvlBttn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Label Visibility="Hidden" Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>

This will get you the Label for the button named Score. "ScoreBtn"is the name of the label element. It's not as complicated as I thought it would be.
var label = (Label)Score.Template.FindName("ScoreBtn", Score);
You really ought to listen to Peter Duniho, write a viewmodel, and bind the label's Content property to a viewmodel property, but if you don't already have a viewmodel, you may not want to rewrite your entire project. Since you don't have a single Binding in your XAML, I imagine that might be the case.

Aligning StackPanel to top-center in Canvas

I'm trying to create an application which is supposed to measure quick reaction performance of it's user. The application starts up in full-screen mode and resizes it's elements accordingly to the screen resolution. The project was strongly inspired by training_aim_csgo2 map.
It's mostly done, but here is the problem:
I put the Label counters inside StackPanel, but outside of Canvas, which prevents the user from clicking on the target if it shows up visually on the StackPanel area (while in fact the target is below it).
Here is the XAML:
<Grid>
<Canvas Name="Canvas" Background="#EFECCA">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>
Could someone help me solve this issue, please?
What I attempted to do so far was to move the StackPanel inside the Canvas and set it's Z-index value to 1 but then it disobeyed HorizontalAlignment and VerticalAlignment settings:
I have also tried to drop the whole StackPanel idea and set positions and Z-indexes of the Label counters programmatically, like so:
counter_SUCCESS.Width = rectangleWidth;
counter_FAILURE.Width = rectangleWidth;
counter_NUMBER.Width = rectangleWidth;
counter_SUCCESS.Height = rectangleHeight / 3;
counter_FAILURE.Height = rectangleHeight / 3;
counter_NUMBER.Height = rectangleHeight / 3;
Canvas.SetLeft(counter_SUCCESS, (ActualWidth - counter_SUCCESS.Width) / 2);
Canvas.SetLeft(counter_FAILURE, (ActualWidth - counter_FAILURE.Width) / 2);
Canvas.SetLeft(counter_NUMBER, (ActualWidth - counter_NUMBER.Width) / 2);
Canvas.SetTop(counter_SUCCESS, 0);
Canvas.SetTop(counter_FAILURE, rectangleHeight/3);
Canvas.SetTop(counter_NUMBER, rectangleHeight/3 + counter_FAILURE.Height);
It appeared fine on my screen but on a different one the Labels were overlapping:

If you don't want any input or hit testing on a certain element you should set the IsHitTestVisible property to false:
<Grid>
<Canvas Name="Canvas" Background="#EFECCA">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<StackPanel IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>

You simply need to re-order your elements.
<Grid Background="#EFECCA">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Canvas Name="Canvas" Background="Transparent">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>
Setting the Grid to have the background, then placing the StackPanel over that, you can put the Canvas on top of everything and set it's Background to Transparent.

XAML for Windows Phone 7

I am building an app in Windows Phone 7.
I am showing a few data in different TextBlocks.
But as the data size is too big, it doesn't fit in my view.
I want to show the data like a paragraph.
If the data size exceeds the size of the emulator I want to put a ScrollBar so that the data can be scrolled and viewed.
Please help me.
I am providing my XAML design.
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<TextBlock TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
<Button x:Name="previous" BorderThickness="0" Click="Image_Back" Margin="0,23,431,682" HorizontalAlignment="Right" Width="76" Height="63" Grid.RowSpan="2">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Image/Previous.png" />
</Button.Background>
</Button>
</Grid>

Try this,
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock TextWrapping="Wrap" Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock TextWrapping="Wrap" Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock TextWrapping="Wrap" Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
</ScrollViewer>
</Grid>
More details
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer(v=vs.110).aspx
http://dotnet.dzone.com/news/scrollviewer-not-scrollable

Try using Scrollable textblock. Hope that help you to solve the issue.

Ispost back like functionality in WPF pages

I am building a WPF application which contains a large number of pages. I want to know whether there is any function which is similar to IsPostBack in Asp.Net. I just wanted to know is this the first time the specific page is loading. Thanks in advance.
xaml
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>

If your page navigation is taking place via Frame, then attach to the Frame.Navigated event. If you provide more detail (some XAML and code) then we might be able to be more helpful...