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.

click on the row of an ItemsControl and pass an id

I made a list , and my need is to be able to make click ( touch ) the user across the row , when clicked I should be able to pass the 'mid' to event , I hid in the code to pick it up then at the click of that record.
It's possible ?
<Grid Grid.Row="1" Grid.ColumnSpan="2">
<ScrollViewer VerticalScrollBarVisibility="Hidden" PanningMode="Both">
<ItemsControl ItemsSource="{Binding Path=NextMeetingList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.Row="0">
<Border Grid.Column="0" Grid.Row="0" Margin="10" Height="60" Background="GhostWhite" CornerRadius="3" BorderBrush="{Binding BorderColor}" BorderThickness="0,8,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="118"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="40" Margin="10,5,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Day}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="12" Margin="77,13,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding DayString}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="70,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Hour}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="86,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text=":"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="90,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding MinuteString}"/>
<Border Grid.Row="0" Grid.Column="0" Width="1" BorderBrush="#BABABA" Height="40" Margin="115,-6,0,0" BorderThickness="1" HorizontalAlignment="Left"></Border>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding subject}" FontWeight="Bold" FontSize="17" Margin="10,10,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Width="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Text="{Binding descr}" FontSize="10" Margin="20,27,150,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding companyName}" FontSize="10" Margin="0,10,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding Location}" FontSize="10" Margin="0,27,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text=">" FontSize="15" VerticalAlignment="Center" Margin="0,-5,10,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding mid}" Visibility="Hidden" FontSize="15" VerticalAlignment="Center" Margin="0,-5,10,0"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>

A possible solution is to wrap your content in an invisible button and passing the id or the entire object as CommandParameter to a Command on the ViewModel.
<Button Command="{Binding DataContext.MyCommmand, ElementName=mainGrid}"
CommandParameter="{Binding}">
<!-- Content -->
</Button>

Typically if I want to handle a Click event of anything I just use a Button and overwrite the .Template of it.
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Template="{StaticResource ContentOnlyTemplate}"
CommandParameter="{Binding mid}"
Click/Command=...>
<StackPanel Grid.Column="0" Grid.Row="0">
...
</StackPanel>
</Button>
</DataTemplate>
</ItemsControl>
WPF controls are meant to be "lookless", so a Button control is ideal in this case because it contains the functionality to handle Click and/or Command/CommandParameter.

Ellipse fill issues with listview WP8.1 UAP

I am wanting the position of the item in list to appear to left of the description but for some reason its making my font messed up and placing it in the center as shown in image. I am just wanting to mimic the same image I have on the map so it coresponds to listview poistion.
<DataTemplate x:Key="ImageTextListInboxTemplate">
<StackPanel Orientation="Horizontal" Width="470" Height="85">
<Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
<Image Source="/SampleImage.png" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Text="" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Name}" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Postcode}"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
<TextBlock Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
With Circle as above
Without circle by just removing the following code
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>

Your containing stack panel is fixed at Height="85". Because it's a vertical stack panel it will add items to the control vertically, so you're specifying:
a StackPanel with a 10 top margin;
a Grid of height 40;
an empty TextBlock of height 26;
leaving 9 pixels for your _Name TextBlock, hence the clipping of the TextBlock and everything under it you're seeing there.
There's a number of ways you could get your ellipse grid to the left of one of the text boxes, I would probably consider wrapping a grid around the textblock you want it to be displayed to the left of like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Width="40" Height="40" HorizontalAlignment="Left">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Grid.Column="1" Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</Grid>

How to get the index of a ListBoxItem

I'm trying to get the index of a ListBoxItem in WP8.... And this is my XAML code
<phone:PivotItem Header="Pins">
<!-- Content Panel -->
<Grid x:Name="ContentPanel2" HorizontalAlignment="Left" Height="583" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="87*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="lstData2"
ItemsSource="{Binding DataCollection2, Source={StaticResource PinsCollection}}" Grid.ColumnSpan="3" Foreground="#FF1D53D0" Height="583" VerticalAlignment="Bottom">
<ListBox.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Horizontal" Tap="StackPanel_Tap" MouseLeftButtonDown ="SetIndex" Tag="{Binding pinId}">
<Image Margin="8"
VerticalAlignment="Top"
Source="{Binding ImageUri}"
Width="100"
Height="100" />
<StackPanel Height="93" Width="259" >
<TextBlock Margin="8"
Width="250"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Foreground="#FF1D53D0"
Text="{Binding Pinnedname}" Height="33" RenderTransformOrigin="0.5,0.5" FontFamily="Segoe WP SemiLight" FontSize="24" FontWeight="Bold" />
<TextBlock Width="155"
Margin="8,0,8,8"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Text="{Binding Status}" Foreground="#FF1D53D0" FontFamily="Segoe WP SemiLight" />
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove Pin" Click="RemovePin_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- End of Content Panel -->
</Grid>
</phone:PivotItem>
I want to get the index in the SetIndex event handler in the MouseLeftButtonDown!

You should use a two-way binding for that:
<ListBox x:Name="lstData2" SelectedIndex="{Binding Index,Mode=TwoWay}"
There's generally no need to add click handlers for ListBox, as most basic click functionality is built into the control.

<view:Content ...> tags in XAML

I inherited some code where I've seen this construction, which I'm not used to, in several locations:
<view:Content x:Name="TimeFrame" Margin="220,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" >
<view:Content.ChildContent>
<view:TimeFrame />
</view:Content.ChildContent>
</view:Content>
Which I must admit seems rather nifty, and thus far works as I want it too. However, then there's this where instead of the <view:TimeFrame />-tag in the center there are a regular control-tags like so:
<view:Content x:Name="SignInControl" Margin="466,317,0,0" HorizontalAlignment="Left" Width="348" Height="344" VerticalAlignment="Top">
<view:Content.ChildContent>
<Grid>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#666666" Margin="1,0,-1,0" Opacity="0.57" >
<Border.Effect>
<BlurEffect/>
</Border.Effect>
</Border>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#FFF3F5F4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="100"/>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ChartWizz" FontFamily="Verdana" FontSize="10" Margin="0,3,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton Style="{StaticResource up_down}" Checked="ToggleButton_Checked" />
<Image Source="Pictures/logo_250.png" Margin="5" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<StackPanel Width="210" Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="Change User or" Margin="0,0,3,0" FontFamily="Verdana" FontSize="11" />
<Button Style="{StaticResource LinkButton}" Click="CreateNewAccLink_Click" Margin="2, 0, 0, 0">
<TextBlock Text="Create new account" FontFamily="Verdana" FontSize="11" Foreground="Black" TextDecorations="Underline"/>
</Button>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Username" FontFamily="Verdana" FontSize="10" Margin="0,0,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Row="4" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Password" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<PasswordBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<Grid Grid.Row="5" HorizontalAlignment="Left" >
<Button Style="{StaticResource LinkButton}" Click="ForgotPassLink_Click" Margin="2, 0, 0, 0" HorizontalAlignment="Left">
<TextBlock Text="Forgot your password?" Width="Auto" Foreground="Black" TextDecorations="Underline" FontFamily="Verdana" FontSize="10" Margin="27,5,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Button>
</Grid>
<StackPanel Grid.Row="7" Width="210" Margin="0,5,0,0" Orientation="Horizontal" HorizontalAlignment="Center" >
<CheckBox Content="Remember me" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Button Width="60" Content="Sign in" Height="23" Margin="55,0,0,0" VerticalAlignment="Center" Click="SiginBtn_Click" />
</StackPanel>
</Grid>
</Border>
</Grid>
</view:Content.ChildContent>
</view:Content>
When I attempted to give the controls here names so that I could access them in code I got the following error:
Cannot set Name attribute value 'txtBox_username' on element 'TextBox'. 'TextBox' is under the scope of element 'Content', which already had a name registered when it was defined in another scope.
I don't know if it's possible to access these members in some other way through the Content scope but if anyone would enlighten me I would be grateful. Either way I'd really like a link to a relevant MSDN page(or other resource) as I can't seem to figure out what to search for in order to learn more about type tags.
Thanks

This behaviour is caused by how UserControls are implemented, see this question for workarounds.