Develop Reference

Handle position of other pages when SplitView pane is open

I am trying to implement splitview in my app.But when ii set IsPaneOpen = true;
My pivots are not moving to right of that split view pane.Insted SplitView Pane opens Over pivotItems.
Someone please help me to resolve this.
Thanks in advance.
My Main page:
<Page
x:Class="SplitView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel x:Name="myrelativepanel">
<Pivot x:Name="mypivot" RelativePanel.AlignRightWith="spv">
<PivotItem x:Name="header1" Header="Header1">
<ListBox x:Name="listView"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="172"
ItemsSource="{x:Bind itemsList}"
/>
</PivotItem>
<PivotItem x:Name="header2" Header="Header2">
<ListBox x:Name="listView1"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="172"
ItemsSource="{x:Bind itemsList}"
/>
</PivotItem>
</Pivot>
<local:SplitViewPage x:Name="spv"></local:SplitViewPage>
</RelativePanel>
</Grid>
</Page>
My SplivView page:
<Page
x:Class="SplitView.SplitViewPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</SplitView.Content>
</SplitView>
</Page>

Use display mode CompactInline, instead of CompactOverlay on your splitview.
DisplayMode="CompactInline"

How to add image inside stack panel which is inside many xaml elements using C# code

I have a xaml page with several panorama items and one of the panorama's code is as below
<phone:PanoramaItem Header="onepan">
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<ListBox x:Name="PhoneList" Height="486" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="108" >
<Image Height="100" Margin="5" Stretch="Fill" Width="100" Source="/Assets/ApplicationIcon.png" ></Image>
<Grid x:Name="ContentPanel" Margin="20,28,0,0" Width="265" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="titles" FontSize="30" FontWeight="Bold" TextWrapping="Wrap" LineHeight=" 24" MaxHeight=" 48" LineStackingStrategy="BlockLineHeight" Grid.Row="0" Foreground="Black" FontStyle="Normal" Text="{Binding title}"
Margin="0,0,0,0" Tag="{Binding title}" Tap="navigateto"/>
<TextBlock Grid.Row="2" VerticalAlignment="Top" TextWrapping="Wrap" Margin="123,-3,0,0" Foreground="Black" FontStyle="Normal" Text="{Binding Date}" Height="27" />
<TextBlock HorizontalAlignment="Left" Margin="0,-4,0,3" Grid.Row="2" TextWrapping="Wrap" Text="date :" Width="118" Foreground="Black"/>
<StackPanel x:Name="ivnod" Orientation="Horizontal" HorizontalAlignment="Right" Height="28" Margin="0,21,10,-33" Grid.Row="2" VerticalAlignment="Top" Width="255">
<TextBlock TextWrapping="Wrap" Text="Rating" Width="64" Foreground="Black"/>
//I want to add here a image tag by c# code
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</phone:PanoramaItem>
I want to add image tag inside stack panel called 'ivnod' using for loop I can add images directly but I dont know whether I should specify all these elements before specifying stack panel and while using this code it displays error
Image img = new Image();
img.Source = new BitmapImage(new Uri("/Assets/ApplicationIcon.png", UriKind.Relative));
ivnod.Children.Add(img);//-->here ivnod displayed as "not available in current context"

You should take Image control over there and you can pass binding to it as you are giving to TextBlock. you just need to pass Source to Image in Binding. that Would work Perfectly.
<StackPanel x:Name="ivnod" Orientation="Horizontal" HorizontalAlignment="Right" Height="28" Margin="0,21,10,-33" Grid.Row="2" VerticalAlignment="Top" Width="255">
<TextBlock TextWrapping="Wrap" Text="Rating" Width="64" Foreground="Black"/>
<Image Source="{Binding imgSource}"></Image>
</StackPanel>

Hide keyboard when user taps outside a password box inside a user control - WIn 8 C#

I have created a the following CustomControl to show the Settings from the SettingsPane
<UserControl
x:Class="xxx.Flyouts.LCSettings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="xxx.Flyouts"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="400">
<Border BorderThickness="1,0,0,0">
<Grid Background="LightGray" >
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Header area for panel -->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40,0,0,0" >
<Button Click="MySettingsBackClicked" Margin="4,4,0,1" Style="{StaticResource SettingsBackButtonStyle}"/>
<TextBlock Margin="10,0,0,0" FontFamily="{StaticResource PeaSnow}" VerticalAlignment="Center" FontWeight="SemiLight" FontSize="24.6667" Text="General" Foreground="#FF0C0B0B"/>
</StackPanel>
</Grid>
<Grid x:Name="SettingsGrid" Grid.Row="1" Margin="40,33,40,39">
<StackPanel Orientation="Vertical">
<TextBlock x:Name="newPasswordTBlock" Text="New Password" Foreground="Black" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="20"/>
<PasswordBox x:Name="newPwdBox" IsPasswordRevealButtonEnabled="True" Background="LightGray" LostFocus="OnPasswordLostFocus" />
<TextBlock x:Name="confirmPasswordTBlock" Text="Confirm Password" Foreground="Black" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="20"/>
<PasswordBox x:Name="confirmPwdBox" IsPasswordRevealButtonEnabled="True" Background="LightGray"/>
<Button x:Name="pwdButton" Content="Ok" HorizontalAlignment="Center" Foreground="Black" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="20" Click="OnPwdButClicked"/>
<TextBlock x:Name="pwdDescrip" Text="" Foreground="Black" TextWrapping="Wrap" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="20"/>
<TextBlock x:Name="blankTBlock2" Text="" Foreground="Black" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="16" TextAlignment="Center" MinHeight="50"/>
</StackPanel>
</Grid>
</Grid>
</Border>
When I click on the passwordbox, the keyboard pops up but on clicking outside the box, it does not dismiss. I tried to set a LostFocus on the password box, but it is not triggered when i click outside the box. I can see the cursor still blinking inside the password box.
Is the keyboard not dismissing because it is a Flyout which comes over the main page? How do I solve this? :(

WindowsPhone ListBox increase height during scrolling in my emulator and device as well

WindowsPhone ListBox increase height during scrolling in my emulator and device as well.I'm using Stack Panel inside ListBox .
This is myxaml code.
<DataTemplate x:Name="LstContentTemplate">
<ListBoxItem HorizontalAlignment="Left" BorderThickness="1" Width="480" BorderBrush="Black" >
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="{Binding Path=Groupname}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="20" FontFamily="Arial" Foreground="Black" HorizontalAlignment="Left" Name="txtgroupname" VerticalAlignment="Top" Width="480" />
</Grid>
<Grid Grid.Row="1">
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Foreground="Black" FontSize="22" HorizontalAlignment="Left" Name="txtname" VerticalAlignment="Top" Width="480" />
</Grid>
<Grid Grid.Row="2">
<TextBlock Text="{Binding Path=Mobile}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Foreground="Black" FontSize="22" HorizontalAlignment="Left" Name="txtmobile" VerticalAlignment="Top" Width="480" />
</Grid>
</Grid>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Ya I got the Solution of that problem , I've visibility Collapsed of those TextBlock in which there is not txet during binding, through a Converter so that TextBlock doesn't occupies there space on list....

Splitting Button in Half

I'm trying to split a button in half so that I can show text data in each half - which can also be increased in size when the application is expanded.
This is the code I've got soo far.
<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="{Binding postcode}" />
<TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
<TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</StackPanel>
I've tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can't align the text on either half.
Here's a graphical representation of the button I'm trying to create...
Update:
Here is what I'm getting with the code above, sadly I'm struggling to get the text to align, or to get anything to stretch to the full width of each half:

StackPanel won't do that; it just stacks elements.
Instead, use a <Grid> with two columns.

StackPanel is not the right container for this. Try using a Grid like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
...
</StackPanel>
<StackPanel Grid.Colunn="1">
...
</StackPanel>
</Grid>
</Button>

I like to use UniformGrids, although a Grid will also work if you need to define your Rows/Columns individually
Here's an example, with correct alignments:
<UniformGrid Columns="2">
<StackPanel Background="LightBlue" >
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="12345" />
<TextBlock Margin="0,6,0,0" Text="Type" />
</StackPanel>
<StackPanel Background="Yellow">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</UniformGrid>
You might also be interested in checking out this link, which gives you a quick visual look at each of WPF's different layouts and how they act.