I'm using a content dialog do display instance data when an item in a grid is selected.
In the calling page's view model, when an item is selected the following method is executed.
public virtual void ItemSelected(object sender, object parameter)
{
var arg = parameter as Windows.UI.Xaml.Controls.ItemClickEventArgs;
var clickedItem = arg.ClickedItem;
var item = clickedItem as ItemsModel;
var dialog = new ItemsDialog();
dialog.DataContext = item;
dialog.ShowAsync();
}
This shows the dialog, and the content is displayed as expected. Now I'm trying to split my xaml into different templates and I'm trying to use a ContentControl to display the appropriate template. I've written a DataTemplateSelector to help choose the correct template, but now I cannot figure out the data binding for the ContentControl (see simplified version below).
<ContentDialog.Resources>
<UI:MyTemplateSelector x:Key="MyTemplateSelector"
Template1="{StaticResource Template1}"
Template2="{StaticResource Template2}"/>
<DataTemplate x:Key="Template1"/>
<DataTemplate x:Key="Template2"/>
</ContentDialog.Resources>
<StackPanel>
<ContentControl DataContext="{Binding}"
ContentTemplateSelector="{StaticResource MyTemplateSelector}"/>
</StackPanel>
When debugging into my ContentTemplateSelector, my binding is always null. I've tried various forms of the binding syntax with no luck. How do I properly set the DataContext of the ContentControl to that of the ContentDialog?
When debugging into my ContentTemplateSelector, my binding is always
null
You need to set data binding for the Content property of ContentControl control, see Remarks in MSDN:
The Content property of a ContentControl can be any type of object,
such as a string, a UIElement, or a DateTime. By default, when the
Content property is set to a UIElement, the UIElement is displayed in
the ContentControl. When Content is set to another type of object, a
string representation of the object is displayed in the
ContentControl.
So the following xaml should work:
<StackPanel>
<ContentControl Content="{Binding}"
ContentTemplateSelector="{StaticResource MyTemplateSelector}"/>
</StackPanel>
Check my completed sample in Github
You have to bind Content also.
Content="{Binding}"
You have the data source (DataContext) and how the data is displayed (templates) and now you need to specify which of the properties brings that together.
Related
I'm trying to implement a tab control, where each item comes from an ICollectionView of my viewmodel. Each tab page, for the items from the ICollectionView will be the same. However, I would like there to be an extra tab page for configuration options.
So an example tab header 'screenshot' might be:
tabA | tabB | tabC | config
on another instance, it could be
tabA | config
or
config
I can define the header for each item using ItemTemplateSelectors, and the content using the ContentTemplateSelectors. So that bit should be okay.
I'm having trouble with adding the config page item since I do not know where to add it. I thought I could set the tab's ItemsSource to be a CompositeCollection, where the final item is the config page object. I have failed to achieve this.
In the following example, I can view the tab headers being populated correctly according to the designer sample data which I have set up - I have not yet added the config page.
<controls:MetroTabControl ItemsSource="{Binding View}">
<controls:MetroTabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value.siteDisplayName}" />
</DataTemplate>
</controls:MetroTabControl.ItemTemplate>
<controls:MetroTabControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value.siteComment}"/>
</DataTemplate>
</controls:MetroTabControl.ContentTemplate>
</controls:MetroTabControl>
As you see, I have set the ItemsSource to be {Binding View}. This "View" comes from my ViewModel and is an ICollectionView.
Ideally i'd be able to do some magic like:
<controls:MetroTabControl>
<controls:MetroTabControl.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding View}"/>
<SomeConfigPageObject/>
</CompositeCollection>
</controls:MetroTabControl.ItemsSource>
...snip...
</controls:MetroTabControl>
But the problem is that when I do the above, the designer preview of the control acts as if there are no items in the ItemsSource.
For reference, each item in the {Binding View} is a object which contains a Value property, the value property containing an object that contains, in this example, a siteDisplayName and siteComment.
For reference, the DataContext for the tab is defined the dockpanel that contains it, as follows.
<DockPanel DataContext="{Binding Source={StaticResource Configurator}}"
d:DataContext="{d:DesignInstance cfuid:ConfigSiteVMSampleData, IsDesignTimeCreatable=true}"
LastChildFill="True">
For reference, the Configurator is my viewmodel and is instantiated in the xaml as:
<UserControl.Resources>
<ResourceDictionary>
...snip...
<cfvmc:ConfigSiteVM x:Key="Configurator" />
...snip...
So, the actual question would be:
How do I add my "config page" at the end of the tab control? Preferably via using the above-hoped method of adding an extra config-page object on the CompositeCollection; however if this is not possible [1] i'm open for suggestions.
[1] I think it doesn't work because the {Binding View} is an ICollectionView and the CompositeCollection requires a "collection" and doesn't accept a "view"
Thank you.
Peter.
I decided to do it through code behind. This means that I do lose my ability to use the design-time data to preview my UI; but it works at run time.
So, in the xaml I have.
<controls:MetroTabControl Grid.Column="0" Grid.ColumnSpan="2"
Grid.Row="0" Grid.RowSpan="2"
ItemsSource="{Binding ElementName=ucMe, Path=TabSitesCollection}">
Where ucMe is the UserControl and TabSitesCollection is a
protected CollectionViewSource m_TabSitesCollectionViewSource;
protected CompositeCollection m_TabSitesComposites;
public ICollectionView TabSitesCollection
{
get { return m_TabSitesCollectionViewSource.View; }
}
That gets initialised in the constructor as follows
public ConfigSiteView()
{
m_TabSitesComposites = new CompositeCollection();
m_TabSitesCollectionViewSource = new CollectionViewSource();
m_TabSitesCollectionViewSource.Source = m_TabSitesComposites;
InitializeComponent();
}
Then, on the Loaded event I can do
m_TabSitesComposites.Add(new CollectionContainer() { Collection = GetModel.View });
m_TabSitesComposites.Add(new TabItem() { Header = "hi" });
m_TabSitesComposites.Add(new TabItem() { Header = "ho" });
This results in almost my desired UI
I now simply need to spiff up my settings tab item and i'm done.
For reference, the xaml designer does not have any preview data - Unless I change the xaml so that the preview loads up (which then breaks the actual execution)
It would have been nice to have it both work while running, and on preview, but I haven't figured out how to do that, and it's not a current priority.
I have a ListView whose Data Context is an ObservableCollection. I then used XAML to format the items and bind to their properties in the ListView in ListView.ItemTemplate.DataTemplate . Now, I want to add a TextBlock here to display the position of the item in the ListView through Binding in XAML. How to do that?
If I got your question right, you just need to add a TextBlock in each item DataTemplate with the index number inside the ListView, right?
If so, you can easily do that by doing something like this:
<DataTemplate x:Key="ItemTemplate">
<Grid>
<!--All your various UI elements here...-->
<!--Add a TextBlock with the formatting you want-->
<TextBlock Text="{Binding Position}"/>
</Grid>
</DataTemplate>
And in C#, add something like this after you've created your Source ObservableCollection, before assigning it to the Property inside your ViewModel:
for (int i = 0; i < myCollection.Count; i++)
{
myCollection[i].Position = Convert.ToString(i);
}
//And then, the usual
Source = myCollection
NB: I'm assuming you have a Property called Source in your ViewModel with INotifyPropertyChanged implemented. You will also have to modify the class you use inside your ObservableCollection and add the Position property of course :)
In Prism , MVVM, Windows 8.1 StoreApp I want the ViewModel to capture the SelectItem in a ListView. The ListView contains an ObservableCollection of objects. The ViewModel needs to lookup more details of the selected object and notify the View. The View in turn should show the details of the object.
I have implemented this, but the View allways shows the former object (after selecting a new one)
Of course what I'm looking for is an immediate and correct reaction in the View on selecting an object. Here are my codesnippets, all in VB code.
EDIT: I have put up another - smaller- example, using this approach. I made a recording of the process in this video. Please take a look at it before you read further!!
The objects come from the ViewModel as:
Public Property Persons As New ObservableCollection(Of Person)
They are bound to a usercontrol:
<Grid>
<ListView
ItemsSource="{Binding Persons}"
ItemTemplate="{StaticResource BusinessCard}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Behaviors:ListViewSelectionChangedAction/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
</Grid>
Via the Behavior eventually this ends up in the ViewModel through this code:
Sub New(InjectedEventAggregator As IEventAggregator)
LocalEventAggregator = InjectedEventAggregator
LocalEventAggregator.GetEvent(Of PersonIsSelectedEvent)().Subscribe(AddressOf HandlePersonIsSelected, True)
This event is handled by this routine
Public Sub HandlePersonIsSelected(ByVal SelectedPerson As Person)
ActualPerson = SelectedPerson
End Sub
The last part of all this is the property that contains the ActualPerson like so:
Private Property _ActualPerson As Person
Public Property ActualPerson As Person
Get
Return _ActualPerson
End Get
Set(value As Person)
SetProperty(_ActualPerson, value)
End Set
End Property
EDIT: and this is the XAML that should show the selected ActualPerson:
<StackPanel DataContext="{Binding ActualPerson}" >
<Image Source="{Binding Photo}" Stretch="Fill" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text="{Binding FamilyName}" />
<TextBlock Text="{Binding Gender}" />
</StackPanel>
</StackPanel>
When I step through the code, I can see that the SelectedItem event is caught in the ViewModel, the handler for the selected person is called, the property is updated. Using Prism this would also mean, that the NotifyPropertyChanged event is fired. It IS fired indeed, otherwise the former object would not show either I guess.
But why is the View not updated immediatelty with the right (Person) object?
If you have a clue.... be my honored guest!
Regards
Let me try to understand what you said in "no reaction on the View". Are you saying the UI is NOT CHANGED, even though the 'ActualPerson = SelectedPerson' is called?
The controls have a binding property called MODE which decides the data flow. The MODE for the TextBlocks that display the Person information can be OneWay. It is possible that the binding is OneTime which is causing the issue.
Can you please confirm what is coming from your Repository? I'm assuming it isn't an observable collection. At least it shouldn't be, I'd think it would be a serialisable POCO object. This means that you will need to add the items to the observable collection. The way I do this if not using a CollectionView is to have a readonly variable of type ObservableCollection, which is never changed. Then when you make the request to messages, I would ensure the collection is cleared, ready for new the new items. Once the messages are returned, loop through each model item (message) within the response and convert them to MessageViewModels (a new class that contains bindable properties and validation (data annotations) as required. As each ViewModel item is created it is added to the observablecollection. The act of adding items to the collection will raise an event the listview is listening for and therefore will display the item (as long as the MessageViewModel has an associated data template.
private readonly _messages = new ObservableCollection<MessageViewModel>();
Public ObservableCollection<MessageViewModel> Messages {get { return _messages;}}
OnNavigateTo
Messages.Clear;
foreach(var message in await _messageRepository,GetMessagesAsync())
{
Messages.Add(new MessageViewModel(){Name = message.Name, Text = message.Text});
}
Does that make sense?
One bad solution, but maybe it is helpful. You can call "again" OnProperyChanged. I say "again" because it is supposed that SetProperty calls it, but I am having some issues with VB.NET and SetProperty too.
Private Property _ActualPerson As Person
Public Property ActualPerson As Person
Get
Return _ActualPerson
End Get
Set(value As Person)
SetProperty(_ActualPerson, value)
OnPropertyChanged("ActualPerson")
End Set
End Property
Edited 04/02/15: the good solution is here: OnPropertyChanged not fired when SetProperty is called
As simple as removing the word "Property" in the private declaration. It is because it is passed ByRef, so it cannot be a property.
In a typical Master/Detail situation...
I have a DataGrid. The ItemsSource of this DataGrid is set in the Completed event of a WCF call - (grdMaster.ItemsSource = e.Result) - where the x:Name of the grid is grdMaster. This is all 100%.
However, when adding a Detail Datagrid inside the master grids DataTemplate and naming it appropriately... my codebehind does not recognise the detail grid. So plainly put, I cannot set the ItemsSource of grdDetail like I do with grdMaster.
Depending on the Master item selected, I need to do a WCF call to get the appropriate Details.
Depending on how you are being notified that an item is being selected for expansion you will need to find the row the user is in:
DataGridRow row = DataGridRow.GetRowContainingElement(...);
and update the row details visibility:
row.DetailsVisibility = Visibility.Visible;
Those details aside, you need to create a style for the details rows -- which is wired to an event you can listen to:
<DataTemplate x:Key="DetailsRowTemplate">
<StackPanel>
<Border BorderBrush="{StaticResource BlackBrush}" BorderThickness="0,2,0,0" Padding="0" >
<data:DataGrid ItemsSource="{Binding DummyResultsView}" AutoGenerateColumns="False"
LoadingRow="DataGrid_LoadingRow"
CanUserResizeColumns="False"
CanUserReorderColumns="False"
HeadersVisibility="None"
IsReadOnly="True">
</data:DataGrid>
</Border>
</StackPanel>
</DataTemplate>
which is set as the RowDetailsTemplate for your grid:
Within the LoadingRow event you can obtain a reference to which data context is involved, and save a reference to the child data grid so that after a WCF call you can set the ItemsSource:
private void DataGrid_LoadingRowDetails(object sender, DataGridRowDetailsEventArgs e)
{
List<DataGrid> detailElements = e.DetailsElement.GetChildrenByType<System.Windows.Controls.DataGrid>().ToList();
var itemSelected = e.Row.DataContext;
if (detailElements.Count > 0)
{
DataGrid detailsDataGrid = detailElements[0];
// save a reference so the ItemsSource can be set later....
this.DataGrid = detailsDataGrid;
this.Model.InitializeDetailsList(detailsDataGrid, itemSelected);
}
}
Hope that helps,
I have a map with a MapItemsControl in my WP7 app that contains pushpins bound to items in a collection of custom classes. The pushpins are bound to properties of the item in the collection via a DataTemplate.
When an item is added to or removed from the collection, all pins display correctly, with properties as per bindings, but when just an items’ properties are modified, the UI does not update. The bindings just seem to get values from the source item upon loading, but I'd like them to keep the UI elements updated when the source collection items' properties are updated.
To illustrate, I’ll create a similar example:
Here’s a custom class:
Public Class Box
Property CurrentColor As Color
Property Location As GeoCoordinate
End Class
There's a collection of them:
Dim TempBoxes As ObservableCollection(Of Box)
My map control has a MapItemsControl in it:
<maps:MapItemsControl Name="BoxControl"
ItemTemplate="{StaticResource BoxTemplate}"
ItemsSource="{Binding TempBoxes}"/>
The item template is something like this:
<DataTemplate x:Key="BoxTemplate">
<maps:Pushpin Location="{Binding Location}" ManipulationStarted="BoxTouched">
<maps:Pushpin.Template>
<ControlTemplate>
<Ellipse Width="35" Height="35" Margin="54,148,366,584"
Stretch="Fill" StrokeThickness="4" Stroke="Black"
Fill="{Binding CurrentColor}" />
</ControlTemplate>
</maps:Pushpin.Template>
</maps:Pushpin>
</DataTemplate>
The touch event handler switches the pin's color between blue and red:
Private Sub BoxTouched(ByVal sender As Object, ByVal e As RoutedEventArgs)
With DirectCast(DirectCast(sender, Pushpin).DataContext, Box)
If .CurrentColor = Colors.Red Then
.CurrentColor = Colors.Blue
Else
.CurrentColor = Colors.Red
End If
End With
End Sub
Whenever I add or remove items from TempBoxes, the pins all render as they should (e.g. if I specify a color in the collection item, the pin shows the color).
Tapping on the item triggers the BoxTouched sub, which causes the item's color to change in the collection, but the UI doesn't change (pin color stays the same).
To get the UI to update the color, I have to get it to render the pins again, by adding something like this to BoxTouched:
BoxControl.ItemsSource = Nothing
BoxControl.ItemsSource = TempBoxes
I'm assuming there's a better way to do this?
In order for the DataTemplate to respond to changes in property values for your data object you need to implement the INotifyPropertyChanged interface on your data object so that property change notification is raised when your properties change.
Take a look at the VB samples in the MSDN documentation if you're unsure how to do this.