Say i have this XAML :
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
I'd like re use it across multiple places.
For example as a DataTemplate for a ItemsControl but also as The basis for something like a buttons content.
How would i go about doing this?
I'm thinking something like an ASP.NET Partial view.
I don't want to use a usercontrol as i don't require any code behind.
I managed to get it to work in a way using a style:
<Style x:Key="myStyle" TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=TaskName}" />
<TextBlock Text="{Binding Path=Description}"/>
<TextBlock Text="{Binding Path=Priority}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It insisted on me using a TargetType otherwise it complained about setting the template.
I can now use this on any control.
If i want to then use this essentially as a datatemplate, i can just set the style of the placeholder item within the datatemplate (probably a ContentControl) to use this.
Create a StylesResourceDictionary.xaml and create a staticresource in your App.Xaml. At runtime, the styles will get binded and then you can reference anything from the dictionary anywhere in your app, across usercontrols or datatemplates etc.
Related
Summary of the Question: What is the correct way to manipulate the same, single ObservableCollection in a xaml page's viewmodel (binded to the ListView of the page ), at runtime in order to show different sets of data, each variation of data providing its own ListView-Style via a StyleSelector?
Description:
I have a UWP xaml page with a single ListView, I want this listview to display all different possible data sets the user might want to see. e.g: A dataset could be between one to 15 columns of data, all with headers. The ListView's ItemSource will use binding to an ObservableCollection to populate it. The ObservableCollection can be populated manually or with one of many SQL sourced DataTable's.
<ListView x:Name="UserPageListView"
ItemsSource="{Binding MainListData, Mode=TwoWay}"
Grid.Column="1"
Width="auto"
Background="Gray"
ItemContainerStyleSelector="{StaticResource UserPage_StyleSelector}">
</ListView>
I have tried binding the ItemContainerStyleSelector to provide a xaml ListView Style (which is stored in a ResourceDictionary), based on the data type of the ObservableCollection, or at least that was the idea. I don't know whether the ObservableCollection's data type should be generic or a defined class per data set to view. The latter makes sense, since a StyleSelector would need it for logic to provide the relevant Style. I used StyleSelector instead of DataTemplateSelector since I want the Selector to include HeaderTemplate as well as ItemTemplate(headers of columns change with the different data sets):
public class UserPage_StyleSelector:StyleSelector
{
public Style WatchlistStyle { get; set; }
public Style UserDetailStyle { get; set; }
protected override Style SelectStyleCore(object item, DependencyObject container)
{
if (item is WatchlistData)
return WatchlistStyle;
if (item is UserDetailData)
return UserDetailStyle;
return base.SelectStyleCore(item, container);
}
}
Style example in ResourceDictionary:
<Style TargetType="ListView"
x:Key="UserDetail_ListView"
x:Name="UserDetail_ListView">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Padding="12"
Background="{ThemeResource SystemBaseLowColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<TextBlock Text="UserDetails"
Style="{ThemeResource CaptionTextBlockStyle}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding Details}"
FontSize="12"
VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
StyleSelector defined in the xaml page:
<Page.Resources>
<viewModels:UserPage_StyleSelector x:Key="UserPage_StyleSelector"
WatchlistStyle="{StaticResource WatchList_ListView}"
UserDetailStyle="{StaticResource UserDetail_ListView}"/>
</Page.Resources>
The ResourceDictionary is defined in app.xaml.cs. Have I complicated this endeavour far too much by using the wrong approach?
ItemContainerStyle target type is ListViewItem, so you can't make ListView style in ItemContainerStyleSelector.
Derive from your requirement (headers of columns change with the different data sets), you need make GroupStyleSelector and ItemTemplateSelector for different header and columns.
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock
Margin="5"
FontSize="25"
Foreground="Gray"
Text="{Binding Name}"
/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
For more detail please refer this document.
This has come up a few times, and I've been struggling with it all day in a UWP app.
My specific issue was that I was using x:Bind inside a ContentTemplate that was inside a DataTemplate:
<DataTemplate x:DataType="IFactionMember">
<Button Command="{x:Bind **Property of IFactionMember**}"> // Good
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Padding="10,0">
<TextBlock Text="{x:Bind **Property of IFactionMember**}" /> // Bad
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
You cannot do this :(
You could use {Binding} instead for your scenario, for example:
<ListView x:Name="listview" ItemsSource="{x:Bind members}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:IFactionMember">
<Button >
<Button.Template>
<ControlTemplate TargetType="Button" >
<Grid Padding="10,0">
<TextBlock Text="{Binding testtext}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
x:bind lacks some of the features of {Binding}, in x:Bind, Path is rooted at the Page by default, not the DataContext, it seems like if you are using x:bind here, it will try to find the property at the MainPage, so that it will not find the correct property.
I am working on a Metro App using C++ and XAML. I want to create a polygon shape and add text inside it.
At first I thought of defining my own Controltemplate and apply it to Textblock but unfortunately it does not understand TargetType = "TextBlock".
Secondly, I thought of inheriting the Polygon class and see if I can do anything there but that class is sealed.
Any ideas on how to achieve this?
In WPF XAML you could do something simple like this:
<Grid Width="60" Height="100">
<Ellipse Fill="Yellow"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello"/>
</Grid>
To get text in the centre of a yellow ellipse.
I'm guessing something that simple will work on WinRT.
You can use something like this with ContentControl or so many other controls:
<ContentControl Width="200" Height="100" Content="Something">
<ContentControl.Template>
<ControlTemplate>
<Grid>
<Ellipse Fill="Red"/>
<TextBlock Text="{Binding Content,RelativeSource={RelativeSource FindAncestor,AncestorType=ContentControl}}"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
I have a listbox control added to my layout as show in the below code snippet.
<ListBox x:Name="lstFilters" ItemsSource="{Binding CustomerCollection, Source={StaticResource VMCustomers}}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Height="200" Margin="12,20,235,80">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<HyperlinkButton Content="{Binding Name}" Style="{StaticResource styleFont}"></HyperlinkButton>
<TextBlock x:Name="txtFilterCount" Text="{Binding ContactNumber, Mode=TwoWay}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Style x:Key="styleFont" TargetType="HyperlinkButton">
<Setter Property="FontFamily" Value="Verdana"></Setter>
</Style>
I have written a style that sets the font family to HyperlinkButton control.
Now i want to set this fontfamily from code behind because i am getting the value at runtime. so how to change it and one more thing i want to do this at the constructor or page load event i.e. i want to set this only once and it should apply for all the items i.e if there are 100 items then it should get applied to all the 100 items. so it makes it faster instead of always binding it any event.
The easiest way to do this is to bind the style to a property of the UserControl using the following XAML:
<Style x:Key="styleFont" TargetType="HyperlinkButton">
<Setter Property="FontFamily"
Value="{Binding DataContext.ListFont,
RelativeSource={RelativeSource AncestorType=UserControl}}">
</Setter>
</Style>
Then you just need to update the property and the style will reflect the new Font for all the list items.
Update:
This answer is only valid for Silverlight 5.
This is probably something simple but I am tearing my hair out at the moment.
I want to display pushpins on a map from a model. So I have created a template for the pushpins
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="Resources/Pushpins/img.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
Then use it to a binded collection as follows:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Template="{StaticResource PushpinTemplate}" />
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
But what I want to be able to do is change the image source via a binding but am not sure how I go about doing this. What I was intending to do was to use a converter to change the image depending on an id within the collection if that alters the best way to do this.
Edit:
I got a little further:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}"/>
<m:Pushpin.Template>
<ControlTemplate>
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding Type,Converter={StaticResource ImageConverter}}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</m:Pushpin.Template>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
If I move the pushpin template into the </phone:PhoneApplicationPage.Resources> section then it fails. I am not sure why. I guess now I am trying to get to grips with my uinderstanding of how this all works
Just add the binding to the ControlTemplate
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding ImageUri}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
I would recommend a ImageUri (of type Uri) property that reflects what image to display, rather than using a converter. But a converter might also work, the bindings are done in the same way.