In the Universal Windows Platform API, how do I use x:Bind inside of a User Control (intended to be the layout for a GridView's ItemTemplate) to bind to instance properties of a GridView's ItemSource?
Background
I'm trying to re-create the layout found in Windows 10 stock apps like Sports, News, Money, etc.
I'm using a two GridViews for the main area of the app; one for "featured articles" (2 large photos w/ headlines) and one for all the other articles (smaller photos w/ headlines).
I'm able to bind to a data source that I supply in the code behind (a List where NewsItem is a POCO with a Image and Headline property) Here's the pertinent parts of the MainPage.xaml:
<Page ...
xmlns:data="using:NewsApp.Models" />
....
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
....
The Image and Headline bind just fine (even though they've not been styled correctly). However, instead I think I need to bind to a User Control to get the styling options I want, control over resizing esp. when using Visual State Triggers and to simplify the XAML in general (at least, this was the technique suggested to me.)
So, I added a new User Control to the project (FeaturedItemControl.xaml), and copied in the DataTemplate's child Grid:
<UserControl ... >
<Grid Name="mainPanel" HorizontalAlignment="Stretch" Width="500" >
<Image Source="{x:Bind Image}" HorizontalAlignment="Stretch" />
<TextBlock Text="{x:Bind Headline}" />
</Grid>
</UserControl>
And then back in the MainPage.xaml, I change the DataTemplate to reference the new FeaturedItemControl:
<GridView Name="FeaturedItems" Grid.Row="0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:NewsItem">
<local:FeaturedItemControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
However, I get the error message for both Image and Headline properties: Invalid binding path 'Headline': Property 'Headline' can't be found on type 'FeaturedItemControl'.
I've tried a few things but am flailing just throwing code at the problem without understanding what I'm doing. Any help would be greatly appreciated.
Thank you for your kind attention.
Using Depechie's answer, I formulated this little cheat cheat for posterity:
Do note that you MUST use this technique to utilize the VisualStateManager with items inside your data bound controls' (GridView, ListView) data templates.
1) Create a User Control.
2) Cut the content of the DataTemplate in your page and paste it into the User Control replacing the template's Grid.
3) Reference the User Control from inside the Data Template:
4) Modify the contents of the User Control changing x:Bind statements to utilize object.property notation:
<UserControl>
<StackPanel>
<Image Source="{x:Bind NewsItem.LeadPhoto}" />
<TextBlock Text="{x:Bind NewsItem.Headline}" />
<TextBlock Text="{x:Bind NewsItem.Subhead}" />
</StackPanel>
</UserControl>
5) Add this in the User Control's Code Behind:
public Models.NewsItem NewsItem { get { return this.DataContext as Models.NewsItem; } }
public ContactTemplate()
{
this.InitializeComponent();
this.DataContextChanged += (s, e) => Bindings.Update();
}
Well it's possible to use x:Bind in user controls, but you'll need to add some extra code behind.
I encountered the same problem in my project, you can see the result here : https://github.com/AppCreativity/Kliva/tree/master/src/Kliva/Controls
So what you need to do is, create a property in the code behind of your user control that points to the correct DataContext.
If you do that, you can use properties of that DataContext in the xaml of your control: for example:
Do note that in the constructor of your control you do need to add: DataContextChanged += (sender, args) => this.Bindings.Update(); because the datacontext will change depending on the page where your control is used!
Then on the page where you are placing this control, you'll also need to do the same to enable the x:bind to work.
You'll see this in my example on the MainPage.DeviceFamily-Mobile.xaml and MainPage.xaml.cs files.
Hope this helps.
x:Bind isn't really hierarchical like Binding/DataContext is. Additionally when you're not directly inside a DataTemplate (such as inside your user control) the object that x:Bind tries to use is 'this' rather than 'this.DataContext'. My current line of thinking on how to solve this sort of issue is to try not to use UserControls anywhere. Instead preferring DataTemplates contained within a ResourceDictionary. There are some pretty strong caveats to this approach though, you will for example crash the xaml compiler if you use x:Bind inside a data template that was created from the ResourceDictionary item template (add new item). you can find a pretty complete example here https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBind its important to note in the sample where they show the ResourceDictionary being used that its not actually just a ResourceDictionary.xaml its also a ResourceDictionary.xaml.cs (this is where the generated code from x:Bind ends up)
Another option is to add Headline and Image as properties on your user control and x:Bind them from the template, then inside the user control x:Bind as you are currently doing, but now the x:Bind generated path 'this.Headline' will exist. Unfortunately the order things are actually bound means that the x:Bind's you have inside your user control will have to be OneWay rather than the default OneTime. this is because x:Bind OneTime does the bind inside the InitializeComponent call, and any set of properties/DataContext stuff doesn't get done until after that has already run.
So to sum this up, you have two options, use data templates everywhere, or bind to properties that are directly on the user control.
I have a brand new Windows Phone 8.1 app with a mainpage:
<Grid>
<Frame>
<local:BlankPage1 />
</Frame>
</Grid>
and BlankPage1 is just a blank Page with a textblock on it. This works fine in Windows 8.1 but in Windows Phone 8.1 it throws a null pointer exception when the window is activated.
Isn't this valid syntax?
I would like to have a frame on my Mainpage in which I use Frame.Navigate to map pages, handling all the navigation myself.
You don't need to use a Frame element to call Frame.Navigate.
Window.Current.Content can be cast to a Frame element.
var f = (Frame)Window.Current.Content;
f.Navigate(...);
I have a Windows XAML page which contents a map as below from the codebehind using my viewmodels constructor. I want to display multiple locations in Map with a pointer so I am using Windows Phone toolkit
<Controls:Map x:Name="AllyMap" Grid.Row="1" Center="{Binding GeoLocation}" ZoomLevel="12">
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl ItemsSource="{Binding MapList}">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding GeoCoordinate}" Content="{Binding Content}"/>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
</Controls:Map>
Now I am binding with MapList Itemsource as below.
atmLocationsMapView = new ATMLocationsMapViewModel();
this.DataContext = atmLocationsMapView;
ObservableCollection<DependencyObject> Mapchildren = MapExtensions.GetChildren(AllyMap);
MapItemsControl AllyMapObject;
AllyMapObject = null;
AllyMapObject = Mapchildren.FirstOrDefault(x => x.GetType() == typeof(MapItemsControl)) as MapItemsControl;
AllyMapObject.ItemsSource = atmLocationsMapView.MapList;
It is working fine with a first iteration. I have a feature to filter among the maps. When I am filtering it I am getting "Items must be empty before using Items Source" in the last line of the above code.
Can anybody please help me with this.
The Silverlight Toolkit has a lovely ContextMenu, which can be shared among multiple instances of controls such as Textbox. Sharing can result from the ContextMenu being declared in a container which also hosts other controls.
<StackPanel>
<TextBox x:Name="box1" Text="{Binding str1}" />
<TextBox x:Name="box2" Text="{Binding str2}" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Name="cm">
<toolkit:MenuItem Name="cmiCut" Header="Cut" />
<toolkit:MenuItem Name="cmiCopy" Header="Copy" />
<toolkit:Separator/>
<toolkit:MenuItem Name="cmiPaste" Header="Paste" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
Sharing can also be achieved with a call to ContextMenuService.SetContextMenu.
When the ContextMenu is shared, it's very helpful for the eventhandler to know which control was right-clicked to open the ContextMenu (e.g. context). Could anyone offer an efficient way to do this?
For comparison, this need is addressed in other platforms as follows:
WPF's ContextMenu has ContextMenu.PlacementTarget
WinForms' ContextMenuStrip has ToolStripItem.Owner.SourceControl
Thanks,
Bill
I'd like to thank Erik Noren for blogging on this topic. I defined my ContextMenu in a Rectangle with Visibility=Collapsed on my MainPage.xaml so that it doesn't handle the mouse right click event. When the right mouse button is clicked anywhere on the page, I use
VisualTreeHelper.FindElementsInHostCoordinates
to identify a Textbox at the click position and then open the ContextMenu. Erik's technique for finding a control with SelectedText dependency property is brilliant.
I Have a ListBox and I am defining its ItemsTemplate using a custom control. I want the control to be displayed in different ways depending on the state of cetain properties of the object. How can I access the item that the ListBox.ItemTemplate is bound to?
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<custom:MyControl />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
With in the code of the custom control how would I do something like:
if((this.DataContext as SomeObject).CollectionProperty.Count() > 0)
DoAction();
I was accessing dataContext in the constructor and it was null. I accessed it in the this.Loaded event and it worked fine.