XAML Element responsive width on Orientation change - xaml

I am building a Windows 8.1 Universal app. On the orientation change for the phone, the outer "Grid" element doesn't change in width when the phone is switched to Landscape mode (and vice versa if the app is originally opened in landscape - doesn't change width when orientation=portrait). The Width is bound to the PivotItem Width and the PivotItem fills the entire screen on orientation change but the Grid does not.
<Page x:Name="page"
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:m="using:App1.Models"
xmlns:vm="using:App1.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar Foreground="White" Background="{StaticResource CustomResource}">
<AppBarButton x:Name="BackButton" Label="Back" HorizontalAlignment="Center"
Click="BackButton_Click" Icon="Back" />
<AppBarButton x:Name="ForwardButton" Label="Forward" HorizontalAlignment="Center"
Click="ForwardButton_Click" Icon="Forward" />
<AppBarButton x:Name="HomeButton" Label="Home" HorizontalAlignment="Center"
Click="HomeButton_Click" Icon="Home" />
<AppBarButton x:Name="SettingsButton" Label="Settings" HorizontalAlignment="Center"
Click="SettingsButton_Click" Icon="Setting" />
</CommandBar>
</Page.BottomAppBar>
<Page.Resources>
<DataTemplate x:Key="myHeader">
<TextBlock Text="{Binding}" FontFamily="CustomFont" />
</DataTemplate>
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="HeaderTemplate" Value="{StaticResource myHeader}"/>
</Style>
<!--<dict:NumberConverter x:Key="myNumberConverter" />-->
</Page.Resources>
<d:Page.DataContext>
<vm:DesignTimeDataSample />
</d:Page.DataContext>
<Grid>
<Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle}"
Background="{StaticResource CustomItem}"
SelectionChanged="MyPivot_SelectionChanged"
Foreground="Purple"
Grid.Row="1">
<PivotItem x:Name="Feed"
Header="news feed"
FontFamily="CustomFont">
<ScrollViewer Name="ScrollViewer">
<StackPanel x:Name="stackPanel">
<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomItem}" BorderBrush="{StaticResource CustomItem}" Foreground="{StaticResource CustomItem}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="0,10,0,10" />
<Setter Property="Foreground" Value="{StaticResource CustomItem}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Image Source="{Binding ImagePath}" Margin="20"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0.333,53" Grid.RowSpan="2" HorizontalAlignment="Stretch">
<TextBlock VerticalAlignment="Center"
LineStackingStrategy="BlockLineHeight"
LineHeight="20" MaxHeight="80"
TextWrapping="WrapWholeWords"
Text="{Binding Headline}" FontSize="18"
FontFamily="CustomItem" />
</Grid>
<Grid Grid.Row="1" Margin="0,0.333,0.333,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5" Text="{Binding Date}"
Foreground="#FFBDBDBD"
FontFamily="CustomItem" />
</Grid>
<Grid Grid.Column="1">
<AppBarButton
Style="{StaticResource CustomItem}"
VerticalAlignment="Center"
Margin="0,0,0,2"
HorizontalAlignment="Right"
Icon="Read"
CommandParameter="{Binding Url}"
Click="StoryButton_Click" FontFamily="Global User Interface"/>
</Grid>
</Grid>
</Grid>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Foreground="White" Content="Send Notification" Grid.Row="0" HorizontalAlignment="Stretch" Name="ToastButton" Click="ToastButton_Click" Margin="0,0,0,25.333"/>
</StackPanel>
</ScrollViewer>
</PivotItem>
<PivotItem x:Name="News" Header="news">
<WebView x:Name="MyWebView" NavigationCompleted="MyWebView_NavigationCompleted"/>
</PivotItem>
</Pivot>
</Grid>
</Page>

Related

The splitview items aren't properly stacking beneath hamburger button

I am working on Visual Studio 2015 and trying to make a hamburger style navigation... but the items of the pane of the splitview are automatically getting a margin, and are not properly stacking beneath the hamburger button [look at the attached image]. I want them to properly stack beneath the Hamburger button on the leftmost of the grid.
I want to use the listbox so that when user navigates to a different page, it remains selected/highlighted, so I can't remove that.
I have attached the MainPage.xaml code and the code of the style i have used. Hope you would help .. Thanks!
<Page
x:Class="MathAssistant.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MathAssistant"
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}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="" FontSize="25" Background="BlueViolet"/>
<TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="36" Foreground="CornflowerBlue" />
<SplitView Grid.Row="1"
Grid.ColumnSpan="2"
Name="Menu"
DisplayMode="CompactOverlay"
OpenPaneLength="270"
CompactPaneLength="56">
<SplitView.Pane>
<ListBox SelectionMode="Single"
SelectionChanged="MenuListBox_SelectionChanged">
<ListBoxItem Name="MenuItemUnitConverter">
<StackPanel Orientation="Horizontal">
<Image Margin="0" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
<TextBlock FontSize="24" Margin="20,0,0,0">
<Run Text="Unit Converter"/>
</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="MenuItemCalculator" >
<StackPanel Orientation="Horizontal">
<Image Margin="0" Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/>
<TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame" Grid.Column="1" Grid.Row="1"></Frame>
</SplitView.Content>
</SplitView>
</Grid>
<Application.Resources>
<Style TargetType="Image" x:Key="SplitviewLogoStyle">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="45" />
</Style>
ListBoxItem has a default padding (that's the opposite of a margin) of "12,11,12,13". Try setting the Padding of the ListBoxItems to 0 then it should be aligned to the left. To set it in the center you could do something like this:
<ListBoxItem Name="MenuItemUnitConverter" Padding="0">
<StackPanel Orientation="Horizontal">
<Image Margin="4" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
<TextBlock FontSize="24" Margin="20,0,0,0">
<Run Text="Unit Converter"/>
</TextBlock>
</StackPanel>
</ListBoxItem>
And modify the Style so that image's margin on left + width + image's margin on the right = SplitView.Width (4+48+4=56):
<Style TargetType="Image" x:Key="SplitviewLogoStyle">
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="48" />
</Style>

Grid not covering all the screen in UWP app

Why my grid is not covering all the screen and how can i fix it? On the designer looks like it should be covering all the width of the screen, but actually leaves a big space on the rigth.
<Grid Background="GreenYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
This code is only a snip, but even with childs the space its there on different sizes.
Edit 1:
Acoording to Luis C. answer i get the same result big empty space to the left:
I found a strange workaround to achieve what i want:
<Grid Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
The result is:
Still its a very strange way to workaround the problem.
Full Code
As you see, im using a SplitView on a GridView that loads Pages(like the one with the mentioned problem) on a Frame inside the SplitViewContent. Other Pages with TextBlock as childrens cover the whole screen as i want. The code for the SplitView is:
<Page
x:Class="MyProject.ViewModels.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyProject.ViewModels"
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}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Click="HamburgerButton_Click" Background="LightGray"/>
<!--<Button Name="BackButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Visibility="Visible" Background="LightGray"/>-->
<CommandBar Name="Bar" RelativePanel.AlignRightWithPanel="True" ClosedDisplayMode="Compact" RelativePanel.RightOf="HamburgerButton" Visibility="Visible" Background="LightGray" IsOpen="False" IsSticky="True" >
<CommandBar.Content>
<TextBlock Name="BarTitle" Text="Title" FontSize="24" Margin="24,8,0,12" HorizontalAlignment="Center" VerticalAlignment="Center" />
</CommandBar.Content>
</CommandBar>
</RelativePanel>
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="Overlay"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single"
Name="IconsListBox"
SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="SymbolsListBoxItem">
<StackPanel Orientation="Horizontal">
<Image Source="x" Width="36" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center"> </Image>
<TextBlock x:Uid="Symbols" Text="[Symbols]" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content >
<Frame Name="FrameHolder"></Frame>
</SplitView.Content>
</SplitView>
<Frame Name="HomePageFrame" >
<!-- Frame not used by now-->
</Frame>
</Grid>
The full code page snippet is(with more children) and the result the same, big blank empty space to the right:
<Page
x:Class="MyProject.ViewModels.SymbolsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyProject.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:data="using:MyProject.Models"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="ListView" x:Key="myListViewStyle">
<Setter Property="AllowDrop" Value="False" />
<Setter Property="CanReorderItems" Value="False" />
<Setter Property="Width" Value="36"/>
<Setter Property="Height" Value="140"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,4,0,0"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style TargetType="TextBlock" x:Key="SymbolViewer">
<Setter Property="FontFamily" Value="/Fonts/etc"/>
<Setter Property="FontSize" Value="30" />
<Setter Property="Padding" Value="8"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<LinearGradientBrush x:Key="GradBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="White" Offset=".5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ItemGradBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset=".5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Page.Resources>
<!-- Spinners -->
<StackPanel Background="AliceBlue" HorizontalAlignment="Stretch" Padding="0">
<StackPanel Background="{StaticResource GradBackground}" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" >
<ListView Name="Uno" ItemsSource="{x:Bind UnoItems}" Style="{StaticResource myListViewStyle}" BorderBrush="White"
BorderThickness="2" IsItemClickEnabled="True" ItemClick="Uno_ItemClick">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" FontFamily="/Fonts/etc"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Not user interactive-->
<TextBlock Text="0" Width="36" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" ></TextBlock>
<!-- Spinner 2 -->
<ListView Name="Dos" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}"
IsItemClickEnabled="True" ItemClick="Dos_ItemClick">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Tres" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Cuatro" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Cinco" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Seiss" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</StackPanel>
</StackPanel>
You just need to remove the "RowDefinition" without height and change the "Auto" Rows to "*".
Something like this:
<Grid Background="GreenYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>

Set ContentDialog to show on bottom of page in UWP

I have several ContentDialogs in a RelativeLayout and want them to appear or have the the vertical alignment to "bottom". But it seems that no matter what I try the dialogs always appear on the top of the screen.
This is how they look now
Any ideas?
Here is a xaml code snippet:
<RelativePanel Height="{Binding ActualHeight, ElementName=Page}" >
<ContentDialog x:Name="EntrepriseDialog"
VerticalAlignment="Bottom"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,194,-71,-194">
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,148,-71,-148">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,142,-71,-142">
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
</RelativePanel>
EDIT: XAML for entire Page
<Page
Name="Page"
x:Class="...Pages.Documentation.DocumentationCreatePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:...Pages.Documentation"
xmlns:userControl="using:...Pages.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="#8FBC3E">
<Grid>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/mainBg.png" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="40" Background="#8FBC3E" >
<StackPanel Orientation="Horizontal">
<Button Name="BtnBack" Click="BtnBack_Click" Margin="20 0 20 0" >
<Button.Template>
<ControlTemplate>
<TextBlock FontSize="20" Foreground="White" FontFamily="Segoe MDL2 Assets" Text=""></TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Name="TxtTitle" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="18"/>
</StackPanel>
</Grid>
<userControl:SyncDataControl></userControl:SyncDataControl>
</StackPanel>
<Grid Grid.Row="1" Name="StackPanel">
<ProgressRing Name="SaveProgressRing" IsActive="False" Foreground="#8FBC3E" Width="40" Height="40" Margin="152,239,87,321" />
<StackPanel Grid.ColumnSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListView Name="ListViewDocumentationItems" ScrollViewer.VerticalScrollMode="Disabled" SelectionChanged="ListViewDocumentationItems_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="80"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="White"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<StackPanel Padding="0 0 10 0" Orientation="Horizontal" >
<Image Source="{Binding ImageSource}" VerticalAlignment="Center" Height="40" Margin="5 0 5 0"></Image>
<TextBlock Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center">
<Run FontWeight="Bold" FontSize="20" Text="{Binding Name}"/>
</TextBlock>
</StackPanel>
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" VerticalAlignment="Center" Padding="0 0 20 0">
<Run FontSize="15" Text="{Binding Count}"/>
</TextBlock>
<Image Width="15" Height="15" VerticalAlignment="Center" Source="/Assets/Images/rightarrow.png" />
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Name="TxtDocDesc" TextWrapping="Wrap" Foreground="Gray" Height="53" />
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Name="PicturePanel" Orientation="Horizontal" Margin="15 0 15 0" />
</ScrollViewer>
</StackPanel>
<Button Name="BtnSave" Grid.Row="2" VerticalAlignment="Bottom" FontSize="25" Click="BtnSave_Click" Background="#8FBC3E" Foreground="White" Height="60" Content="Gem" HorizontalAlignment="Stretch" Margin="5 5 5 5"/>
<RelativePanel VerticalAlignment="Stretch" >
<ContentDialog x:Name="EntrepriseDialog" VerticalContentAlignment="Bottom"
RelativePanel.AlignBottomWithPanel="True"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
RelativePanel.AlignBottomWithPanel="True"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="DialogDownloadProgress"
VerticalAlignment="Stretch"
Title=""
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<StackPanel Padding="0,50">
<TextBlock Name="ProgressTitle" Text="Test test" HorizontalAlignment="Center" Padding="0 0 0 20"/>
<ProgressBar x:Name="ProgressBarDownload" HorizontalAlignment="Stretch" IsEnabled="True"></ProgressBar>
</StackPanel>
</ContentDialog>
</RelativePanel>
</Grid>
</Grid>
It seems the positioning of ContentDialog instances is not in the hands of the developer, at least not without custom versions of it. Afaik the OS will decide where to place the dialog for you.
See here for more information:
http://www.reflectionit.nl/blog/2015/windows-10-xaml-tips-messagedialog-and-contentdialog
So if positioning of the dialog is critical then you might have to create a custom control.

Windows phone 8.1 Textblock width to Fill

I want to create the layout as shown in the following image's first section.
But with the code attached, I can only get the layout output as show in the bottom section of the image attached.
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You don't need the StackPanel in the DataTemplate - the Grid you have is enough for this.
Also, in order to get the items to stretch, define a simple ListView.ItemContainerStyle in your ListView:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
So, full code:
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Try it
<ColumnDefinition Width="100" />
instead of Width="*"

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>