Windows Phone 8 - ASP.Net Master Page Equivalent - asp.net

I'm new to Windows Phone 8 Development. I have developed ASP.NET websites before.
My pages (In WP8 Application) share the same headers and footers.
So what is the best method to implement a Master Page like in windows phone 8 ?
I've came across a few solutions that use Frame tag ; but they were not applicable.
Any help is highly appreciated.
PS: I'm using MVVM Light Toolkit
I came across this solution but it is a work around:
1- defining <ControlTemplatex:Key="Decorator" TargetType="ContentControl"> in App.xaml
2- in each page i want that template i just add <ContentControl Template="{StaticResource Decorator}">
Here is a little detailed sample:
App.xaml
<ControlTemplate x:Key="Decorator" TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderPanel" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackBtn" Grid.Column="0" />
<TextBlock Grid.Column="1" Text="{Binding Title}" />
</Grid>
<ContentPresenter Grid.Row="1" />
<Grid x:Name="BottomPanel" Grid.Row="2" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
</Grid>
</ControlTemplate>
Now in any xaml page i want to embed that content template i just add the following:
<ContentControl Template="{StaticResource Decorator}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Grid Title" />
<Grid x:Name="ContentGrid" Grid.Row="1">
</Grid>
</ContentControl>
Resource: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control

Related

UWP - automationProperties.Name in case of a change in value

I have a ListView which is populating the result based on DataTemplate. See the code below
I am raising property changed event in cpp to reflect the same in UI for ResultText field.
But the same value is not getting reflected in AutomationProperties.Name.
How to update AutomationProperties.Name ?
<DataTemplate x:DataType="local:testResults">
<Grid x:Name="diagGrid" HorizontalAlignment="Stretch" Visibility="{x:Bind ShowStage, Mode=OneWay}" AutomationProperties.Name="{x:Bind ResultText}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0" Symbol="{x:Bind ResultSymbol, Mode=OneWay}" Foreground="{x:Bind SymbolColor, Mode=OneWay}" Visibility="{x:Bind IsStageComplete, Mode=OneWay}" HorizontalAlignment="Center"/>
<ProgressRing Grid.Column="0" IsActive="{x:Bind IsStageRunning, Mode=OneWay}" Margin="10,0,20,0" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{x:Bind StageName, Mode=OneWay}" Foreground="{ThemeResource AppBarItemDisabledForegroundThemeBrush}">
</TextBlock>
<TextBlock x:Name="test" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Text="{x:Bind ResultText, Mode=OneWay}" Margin="10" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>```
I added mode=OneWay, then it worked.
AutomationProperties.Name="{x:Bind ResultText, Mode=OneWay}">

Camera feed gets lost when video is playing

I am using Xamarin forms [mediaElement]https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/mediaelement view to play a video, but on top of the video should be a camera feed of the front camera, why does the camera feed gets lost when the video starts to play?
I am now using a grid to overlay the camera feed from the video player and here is what I have so far.
<Grid VerticalOptions="StartAndExpand"
RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<MediaElement
Grid.Row="0"
Grid.Column="0"
Aspect="AspectFit"
Source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ShowsPlaybackControls="False"/>
<Grid Grid.Row="0"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<local:CameraPreview Camera="Front"
Grid.Row="0"
Grid.Column="1"/>
<StackLayout Grid.Row="1"
Grid.Column="1"/>
</Grid>
</Grid>
And this is how it should be positioned.
sample_layout
Any advice would be a great help ! Thanks.

Twoway binding in wasm

I'm testing the Uno platform and wasm.
I test a simple databinding where I have a username in a textbox after login ainst a webapi I update the property of the username to test the update of the gui from a binded property in the viewmodel.
xaml.
in the login button
var result = await webApiClient.LoginUser(ViewModel.LoginModel);
ViewModel.LoginModel.Email = result.Model.Name;
If I run the app under UWP it works, under wasm the text box don't update.
<Page
x:Class="DeviceExchange.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DeviceExchange"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ios="http://nventive.com/ios"
xmlns:wasm="http://nventive.com/wasm"
mc:Ignorable="d ios wasm">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Device Exchange
Portal" Margin="20" FontSize="30" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="username" Margin="3"
FontSize="15" />
<TextBox Grid.Row="3" Grid.Column="1" Text="{x:Bind LoginModel.Email,
Mode=TwoWay}" Background="White" />
<TextBlock Grid.Row="4" Grid.Column="1" Text="username" Margin="3"
FontSize="15" />
<PasswordBox Grid.Row="5" Grid.Column="1" Password="{x:Bind
LoginModel.Password, Mode=TwoWay}" Background="White"/>
<Button Margin="0,5" Click="LoginButton_Click"
VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Row="6"
Grid.Column="1" x:Name="LoginButton" Content="Login" />
</Grid>
</Page>
{x:Bind Mode=TwoWay} is not supported right now on Uno.
https://github.com/unoplatform/uno/issues/2587
You can, instead, write it this way as a work-around:
Text="{Binding LoginModel.Email, Mode=TwoWay, RelativeSource={RelativeSource Self}}"

How to setup Row/Column Definitions in Xamarin.Forms Xaml?

I managed to setup rows and columns from the code but couldn't move this settings to xaml:
grid.RowDefinitions = new RowDefinitionCollection {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
};
grid.ColumnDefinitions = new ColumnDefinitionCollection {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
The following doesn't work:
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
</Grid>
From the documentation I managed to fetch only c# implementation
I also get the same behaviour (does not fill and expand) for a grid with a single cell (1 row / column, although I am not sure why we would ever need a grid with a single cell full size of screen), but it seems to work fine for a 2 x 2, 3 x 3 cell grid (have not tried others yet).
The Height="" and Width="" attributes are required in Xamarin Forms although I "think" they are not needed in WPF as the default assumes this is the case.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="1"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="2"></Button>
</Grid>
</ContentPage.Content>
Here is a sample
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>

Windows Store App Button Click Event Not Firing with Grid Template

I created a project using the default Grid Template with VS2012, and added a button to the upper right hand corner and it is NOT clickable, and if I remove the GridView then it's clickable. Strange to me, could someone point out why this is the case
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
<GridView .... />
</Grid>
Your GridView is being drawn on top of your button grid. Move the button grid declaration below the GridView.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Move the GridView Here -->
<GridView .... />
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
</Grid>

Resources