How to define implicit data templates in Metro XAML? - xaml

I am trying to create a DataTemplate for mapping a simple data type with a corresponding view as follows:
<DataTemplate DataType="{x:Type src:Person}">
<TextBox Text="{Binding Name}"/>
</DataTemplate>
I get a compiler error indicating that the DataType property is not recognized or accessible. Am I missing something here? Is there new syntax for doing this or is the feature missing? Are there alternative solutions for implicit templates?
For reference, here is the full code with the DataTemplate qualified using a x:Key attribute (which works):
<UserControl x:Class="Metro_App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:src="clr-namespace:Metro_App"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<UserControl.Resources>
<DataTemplate x:Key="PersonTemplate">
<TextBlock Text="{Binding Name}" Foreground="White" FontSize="72"/>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<ContentControl Content="{Binding MyPerson}" ContentTemplate="{StaticResource PersonTemplate}"/>
</Grid>
</UserControl>

With WinRT, the syntax for mapping your CLR namespaces to XAML are different. You should change you mapping from:
xmlns:src="clr-namespace:Metro_App"
to
xmlns:src="using:Metro_App"
For further information on moving from Silverlight to WinRT, see the series of blog posts by Morten Nielsen, or the article I wrote about creating a cross platform Silverlight / WinRT application.
However ... if you look at the API documentation for DataTemplate you will find that there is not DataType property. Within WinRT there is implicit styling, but not implicit data templating.

Silverlight doesn't have DataTemplate.DataType, and I suspect that Windows XAML framework inherited that limitation. You might have to use DataTemplateSelector instead.
Interestingly enough, it does have DataTemplateKey class, but instantiating it from XAML does not work.

Have you define namespace?
xmlns:src="clr-namespace:WpfApplicationNamespace"
<Window x:Class="WpfApplicationNamespace.MainWindow"
xmlns:src="clr-namespace:WpfApplicationNamespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type src:Persone}"/>
</Window.Resources>
<Grid>
<StackPanel Orientation="Vertical">
<Button Content="fffff" Click="Button_Click" />
</StackPanel>
</Grid>
</Window>

Related

Unwanted margin in NavigationView.Content

I made a simple app that does nothing. It inly displays a NavigationView with two items and a TextBlock as its content. This is the code:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<NavigationView>
<NavigationView.MenuItems>
<NavigationViewItem Content="First Item" />
<NavigationViewItem Content="Second Item" />
</NavigationView.MenuItems>
<TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Welcome to my Page"/>
</NavigationView>
</Grid>
</Page>
My app looks like this:
Why is there extra space at the top of the TextBlock? And how to remove that space? I know it is possible because the News app uses NavigationView and there is no vertical margin. Here is its screenshot:
You need to set the AlwaysShowHeader property to False:
<NavigationView AlwaysShowHeader="False">
This is called out in the docs here, though the new preview version seems to change this behavior currently and not show any header by default.

Binding ViewModel property to the primary View or sub view if primary view including sub view?

I have a primary View. It includes FirstSubView and SecondSubView.
<navigation:Page x:Class="Test.Views.PreimaryView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:localViews="clr-namespace:Test.Views"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="1057" d:DesignHeight="707"
Title="TestView Page">
<UserControl.Resources>
<silverlightLib:BooleanVisibilityConverter x:Key="BooleanVisibilityConverter"></silverlightLib:BooleanVisibilityConverter>
</UserControl.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="Transparent">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<localViews:FirstSubView DataContext="{Binding VmFirst, Mode=TwoWay}"></localViews:FirstSubView>
<localViews:SecondSubView DataContext="{Binding VmSecond, Mode=TwoWay}" Visibility="{Binding IsAdjustVisible, Converter={StaticResource BooleanVisibilityConverter}}"></localViews:SecondSubView>
</StackPanel>
</StackPanel>
</ScrollViewer>
You see in the SecondSubView I have a binding property IsAdjustVisible.
My question is where an I set it? I set up it in both ViewModels to adjust the visibility of the second View. But it doesn't work, even when it is false, the View is still shown.
Finally I found the issue. I only need one place to put the properties. Which is the sub-View rather than the Main View.

How to add image and keep text on PivotItem

This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).
The goal is to replicate the following Navigation model:
(source: s-msft.com)
Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?
<Page
x:Class="Lenny.Windows.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Lenny.Windows.Views"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
<Grid />
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
</Pivot>
</Grid>
</Page>
If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.
I said this because you need the text needs to be variable.
If you are not using MVVM pattern you need to use the Binding Approach
https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx
in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template

How to bind by element name when control is inside a UserControl?

I am trying to bind the Fill property of a Rectangle to a property in the page's DataContext by using the element name, but because the Rectangle is in a UserControl the page is not found so binding does not occur.
Simplified example:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:Converters_Theme="using:ProjectName.Common.Converters"
xmlns:CustomControls="using:ProjectName.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ProjectName.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ProjectName.ViewModels"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ProjectName.Views.TestPage"
x:Name="pageName"
mc:Ignorable="d">
<Page.Resources>
<Converters_Theme:ThemeColorToSolidColorBrushConverter x:Key="ThemeColorToSolidColorBrushConverter"/>
<DataTemplate x:Key="ItemDataTemplate">
<StackPanel Orientation="Vertical">
<!-- ... -->
<Rectangle Fill="{Binding DataContext.Theme.Color, Converter={StaticResource ThemeColorToSolidColorBrushConverter}, ElementName=pageName}" MinHeight="40" MinWidth="40" />
<!-- ... -->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.DataContext>
<ViewModel:PageViewModel />
</Page.DataContext>
<Grid>
<CustomControls:Tab>
<CustomControls:Tab.LeftContent>
<ItemsControl ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ItemDataTemplate}" />
</CustomControls:Tab.LeftContent>
<CustomControls:Tab.RightContent>
<!-- ... -->
</CustomControls:Tab.RightContent>
</CustomControls:Tab>
</Grid>
</Page>
Simple way to accomplish it is to make your ViewModel a StaticResource, e.g. in App.xaml (may work in your Page.xaml):
<App.Resources>
<ViewModel:PageViewModel x:Key="MyPageViewModel" />
</App.Resources>
And then reference to it in your Page.xaml:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:Converters_Theme="using:ProjectName.Common.Converters"
xmlns:CustomControls="using:ProjectName.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ProjectName.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ProjectName.ViewModels"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ProjectName.Views.TestPage"
x:Name="pageName"
DataContext="{StaticResource MyPageViewModel}"
mc:Ignorable="d">
<Page.Resources>
<Converters_Theme:ThemeColorToSolidColorBrushConverter x:Key="ThemeColorToSolidColorBrushConverter"/>
<DataTemplate x:Key="ItemDataTemplate">
<StackPanel Orientation="Vertical">
<!-- ... -->
<Rectangle Fill="{Binding Theme.Color, Source={StaticResource MyPageViewModel}, Converter={StaticResource ThemeColorToSolidColorBrushConverter}}" MinHeight="40" MinWidth="40" />
<!-- ... -->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid>
<CustomControls:Tab>
<CustomControls:Tab.LeftContent>
<ItemsControl ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ItemDataTemplate}" />
</CustomControls:Tab.LeftContent>
<CustomControls:Tab.RightContent>
<!-- ... -->
</CustomControls:Tab.RightContent>
</CustomControls:Tab>
</Grid>
</Page>
To do it in much more cleaner way, I advise you to use ViewModelLocator as a static resource in app, which will properties to all ViewModels and make it StaticResource in App.xaml. It is much more cleaner way to instantiate one class in App.xaml than every ViewModel you have.

Binding the value of an UIElement within GridViewDataColumn.Header not working

I am trying to show a circle in a telrik gridview and I wanted to bind the colour dynamically to this circle.Since I am working with MVVM pattern I have to bound my view model to the datacontext of my page.But the binding does not seems to be working for me.When I investigated the issue was because the column headers does not have any datacontext, so I tried bound the value using 'ElementName' and tried to use its datacontext but even that is also not working.
Could anyone please help me resolving this issue.
This is my xaml code
<UserControl x:Class="TelrikStyling.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:myColour="clr-namespace:TelrikStyling"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<telerikGrid:RadGridView x:Name="radGridView"
AutoGenerateColumns="False">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewDataColumn>
<telerikGrid:GridViewDataColumn.Header>
<StackPanel Orientation="Horizontal">
<Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=myMainPage, Path=DataContext.Colour}"></Ellipse>
</StackPanel>
</telerikGrid:GridViewDataColumn.Header>
</telerikGrid:GridViewDataColumn>
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
</Grid>
</UserControl>
This is my view model
public MainPage()
{
InitializeComponent();
this.DataContext = new MainPageViewModel { Colour = new SolidColorBrush(Colors.Red) };
}
Try using RelativeSource instead of ElementName in your Binding
I've had similar issues in the past where I couldn't resolve a binding using ElementName but could with RelativeSource. I think it may have to do with the timing of resolving the binding.
<Ellipse Fill="{Binding RelativeSource={RelativeSource
AncestorType={x:Type myColour:MainPage}},
Path=DataContext.Colour}" />
I have found a solution for my problem that is by adding new ellipse to the layout as a child of the layout grid and then bind the Colour property of the viewmodel to the Fill property of new ellipse.Later I have bound Fill property of the ellipse in the RadGrid to the newly added ellipse.
This is the new xaml
<UserControl x:Class="TelrikStyling.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:myColour="clr-namespace:TelrikStyling"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<telerikGrid:RadGridView x:Name="radGridView"
AutoGenerateColumns="False">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewDataColumn>
<telerikGrid:GridViewDataColumn.Header>
<StackPanel Orientation="Horizontal">
<Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=invisibleEllipse, Path=Fill}"></Ellipse>
</StackPanel>
</telerikGrid:GridViewDataColumn.Header>
</telerikGrid:GridViewDataColumn>
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
<Ellipse x:Name="invisibleEllipse" Width="20" Height="20" Fill="{Binding Colour}"></Ellipse>
</Grid>
</UserControl>
Can anyone tell me why the binding was not working when I gives myMainPage as the element name and it started working when I given a new elisple?
Untill someone answer to this question, I am marking this as an answer.