I have a Shell.xaml file which contains two other UserControls. On the left is my TreeView and on the right is a detail screen.
I want the detailscreen to be switchable based on a selected TreeViewItem. I know this can be achieved by using DataTemplates, because I've done it with simple button clicks and using the <ContentControl Content="{Binding CurrentDetailViewModel}"> tag to accomplish this, but I have no idea how to accomplish this based on a selected TreeViewItem. I also have a separate ViewModel class for my UserControl which holds my TreeView and a separate for each detail screen.
I've been using Josh Smith's tutorial on TreeViews: http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx
So I also do use the TreeViewItemViewModel.cs class of his.
Could someone shed some light onto this?
Thanks,
Grant
If both the treeview and the details are displaying the same object (i.e the ItemsSource of the treeview contains the objects that you want to data template in the custom control) then you should be able to set a property on an underlying ViewModel that both controls share and have the custom control display something relevant with data templates.
for example, in the ViewModel:
object TreeViewSelectedItem
{
get{ return _treeViewSelectedItem;}
set {_treeViewSelectedItem = value; NotifyPropertyChanged("TreeViewSelectedItem");}
}
Treeview xaml
<TreeView ... SelectedItem={Binding TreeViewSelectedItem Mode=OneWayToSource}".../>
custom control xaml
<UserControl>
<Control.Resources>
<DataTemplate DataType="{x:Type Plane}">
....
</DataTemplate>
<DataTemplate DataType="{x:Type Train}">
....
</DataTemplate>
<DataTemplate DataType="{x:Type Automobile}">
....
</DataTemplate>
</Control.Resources>
<ContentControl Content={Binding TreeViewSelectedItem}"/>
</Usercontrol>
Related
I'm writting an app in WP7 (Silverlight 3). I have a view model that looks like this
public class MainViewModel
{
public List<ActivityTypes> ActivityTypes{get;set;}
public RelayCommand LoadActivity{get;set;}
}
My pages datacontext is set to the view model and I have a listbox with it's item source set to the ActivityTypes collection. In the listbox I'm trying to render a list of buttons who's command is bound to the LoadActivity property on the viewmodel. RelayCommand is part of the MVVM Light toolkit in case you are wondering what it is.
The problem I am having is I can't find a way to bind my button command to the LoadActivity property as my listbox has it's itemsource set to the Activitytypes collection and this property is in the parent. I've read about FindAncester but it doesn't look like this is supported in Silverlight 3.
My XAML looks like this
<UserControl.Resources>
<DataTemplate x:Key="ActivityTypeListTemplate">
<StackPanel>
<Button Command="{Binding LoadActivity}"> <!--binding not found as we're in the collection-->
<TextBlock Text="{Binding Name}" FontSize="50"/>
</Button>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<ListBox Margin="0" ItemsSource="{Binding ActivityTypes}" ItemTemplate="{StaticResource ActivityTypeListTemplate}"/>
</Grid>
What's the best way to code something like this?
There is no "direct" way to do this. You can set the Buttons DataContext to your MainViewModel (preferably as a StaticResource link) and the it would work.
Take a look at Bind to parent object in xaml
Hi I would like to write some kind of dashboard. You should be able to drag widgets on the dashboard from some source. The layout of the widgets should be free (first Canvas, later some own Panel).
My questions:
Do you have any hints for information about this kind of controls for me?
Is it a good idea to use Selector as BaseClass or should inherit from Control
I would make a BaseClass for all widgets, and then build a ViewModel that inherits from that BaseClass for each Widget, along with a View to go with that ViewModel
After that, I would have something like ObservableCollection<WidgetBaseViewModel> OpenWidgets in the main application ViewModel, and bind it to an ItemsControl.
The ItemsControl would have it's ItemsPanelTemplate set to a Canvas, and each WidgetBaseViewModel would contain a Top, Left, Height, and Width property.
The actual UI to display each Widget with would be based on a DataTemplate, and could be anything you want, although a UserControl would be easiest
<ItemsControl ItemsSource="{Binding OpenWidgets}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:WidgetAViewModel}">
<local:WidgetAView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:WidgetBViewModel}">
<local:WidgetBView />
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas ... />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Also, you'll need to bind your Canvas.Top/Canvas.Left on the ItemContainerStyle instead of on the actual ItemTemplate to get it to display correctly in the canvas.
I am developing a custom WPF control and confused how to use the dependency property. My view model contains 2 properties:
class Customer {
string Name;
string ID;
}
My custom control is responsible for displaying these fields.
Q1: Do I need to define any dependency properties (eg "Name", "ID") in my custom control?
Q2: I am using ItemsControl to display a list of Customers. How is the Customer object passed to my custom control? Is it done through the DataContext or do I need to add a "Customer" dependency property in my control and in the xaml, bind "Customer" to "something" (what's that something)?
<ItemPresenter>
<MyCustomControl Customer="??what should i put here???"/>
</ItemPresender>
Q1. Why do you have a custom control? Ordinarily, you would just create a UserControl (there is a distinction in WPF between UserControl and custom control) and bind properties within your UserControl to properties of your view model. For example (let's call this CustomerView):
<UserControl ...>
<StackPanel>
<TextBlock Text="{Binding ID}"/>
<TextBox Text="{Binding Name}"/>
</StackPanel>
</UserControl>
Q2. Through the DataContext. For example, you might have something like this:
<ItemsControl ItemsSource="{Binding Customers}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:CustomerView/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Each item generated by the ItemsControl will have the related data item set as its DataContext. Hence, each CustomerView will have the appropriate Customer as its DataContext.
What is the simplest example of binding the items of a TabControl to an ObservableCollection?
Each tab's content will have unique data, and indeed this data will have observableCollections of its own bound to the items components.
Currently I have a user control, which I would like to set as the content of each tab as soon as it is created. I also need to dynamically set the datacontext of this new user control when the tab is created. So, essentially, I would like the tabcontrol's observablecollection contain modelviews that map to the data in each tab.
On top of that, I need to do all this without violating MVVM in WPF! Any help?
Much appreciated!
Basic example :
<Window.Resources>
<DataTemplate x:Key="templateForTheContent" DataType="{x:Type vm:TheViewModelType}">
<v:YourUserControl/>
</DataTemplate>
<DataTemplate x:Key="templateForTheHeader" DataType="{x:Type vm:TheViewModelType}">
<TextBlock Text="{Binding ThePropertyToDisplayInTheHeader}"/>
</DataTemplate>
</Window.Resources>
...
<TabControl ItemsSource="{Binding YourCollection}"
ContentTemplate="{StaticResource templateForTheContent}"
ItemTemplate="{StaticResource templateForTheHeader}">
</TabControl>
I have a WPF ItemsControl who's ItemsSource is bound to an observable collection of view models in MVVM. The ItemTemplate is set to the user control that I want. However, there are instances when I would like another control instead of the one specified in XAML.
How can I easily do this?
Use DataTemplates to map view models to views:
<ItemsControl ItemsSource="{Binding SomeCollectionOfViewModels}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:FirstViewModel}">
<Label>Foo</Label>
</DataTemplate>
<DataTemplate DataType="{x:Type local:SecondViewModel}">
<Label>Bar</Label>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
If I understand you have a collection that contains two different type of object and you want 2 different template.
You could build a datatemplate for each object type and leave WPF to render the right template based on the object type.