How can I track the selected TabPage's DataContext from my ViewModel? - wpf

I have TabItem class:
public class TabItem
{
public string Header { get; set; }
public IView Content { get; set; }
}
and in my model:
public ObservableCollection<TabItem> Tabs
{
get { return _tabs; }
set
{
if(_tabs!=value)
{
_tabs = value;
RaisePropertyChanged("Tabs");
}
}
}
public TabItem CurrentTabItem
{
get { return _currentTabItem; }
set
{
if (_currentTabItem != value)
{
}
_currentTabItem = value;
RaisePropertyChanged("CurrentTabItem");
}
}
In View i'm binding to ModelView:
<TabControl x:Name="shellTabControl" ItemsSource="{Binding Tabs}"
IsSynchronizedWithCurrentItem="True" SelectionChanged="ShellTabControlSelectionChanged">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
From view i want to change ViewModel's CurrentTabItem property:
private void ShellTabControlSelectionChanged(object sender, SelectionChangedEventArgs e)
{
if(e.Source is TabItem)
{
var tabItem = e.Source as TabItem;
ViewModel.CurrentTabItem = tabItem; //don't work
}
}
What is the best approach to convert TabControl's TabItem to my TabItem?

Maybe it is better to use SelectedItem="{Binding CurrentTabItem, Mode=TwoWay, UpdateSourceTrigget=PropertyChanged}"?

<TabControl x:Name="shellTabControl" ItemsSource="{Binding Tabs}"
IsSynchronizedWithCurrentItem="True"
SelectionChanged="ShellTabControlSelectionChanged"
SelectedItem={Binding Path=CurrentTabItem,Mode=Twoway}>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
This will get you the selected TabItem.......
Also change the Name of your Custom "TabItem" its confusing ;)

Related

Bind ListViewItem ContextMenu MenuItem Command to ViewModel of the ListView's ItemsSource

I have a ListView of Expanders. Each Expander (representing a database table) will have items under it, in another ListView. I want to Right-Click and have an "Edit" option on the innermost items, which represent records in the corresponding database table.
There is an ICommand named 'Edit' in my MainEditorViewModel. The Datacontext in which this command resides is the same as that of the outermost ListView named "TestGroupsListView"
Here is the XAML markup for the ListView of Expanders. The outermost ListView I've named for referencing in the binding via ElementName for the MenuItem's Binding:
<ListView Name="TestGroupsListView" ItemsSource="{Binding TestGroups}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Style="{StaticResource MaterialDesignExpander}" >
<Expander.Header>
<Grid MaxHeight="50">
<TextBlock Text="{Binding Name}"/>
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Add..." Command="{Binding Add}"/>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Expander.Header>
<ListView ItemsSource="{Binding Records}" Style="{StaticResource MaterialDesignListView}" Margin="30 0 0 0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit"
Command="{Binding ElementName=TestGroupsListView, Path=DataContext.Edit}"
CommandParameter="{Binding }"/>
</ContextMenu>
</Grid.ContextMenu>
<Button Content="{Binding RecordName}" Command="{Binding ElementName=TestGroupsListView, Path=DataContext.Edit}"/>
<!--<TextBlock Text="{Binding RecordName}" AllowDrop="True"/>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am able to bind a button in the DataTemplate to 'Edit' successfully, but when I attempt to bind the MenuItem's Command to 'Edit', nothing happens. Why might this be that the button command binding works using ElementName but the same binding in the ContextMenu doesn't?
I think it will be better to use the context menu globally for ListView and globally for each Child ListView. Ok, here is my solution:
<ListBox ItemsSource="{Binding Groups}">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Add..." Command="{Binding Add}"/>
</ContextMenu>
</ListBox.ContextMenu>
<ListBox.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Name}">
<ListView ItemsSource="{Binding Records}" SelectedItem="{Binding SelectedRecord}">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit" Command="{Binding Edit}" IsEnabled="{Binding CanEdit}"/>
</ContextMenu>
</ListView.ContextMenu>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Expander>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And for better understanding code behind:
public class GroupsVM : ViewModelBase
{
public ICommand Add
{
get => null; //Command implementation
}
public ObservableCollection<GroupVM> Groups { get; set; } = new ObservableCollection<GroupVM>()
{
new GroupVM { Name = "First" },
new GroupVM { Name = "Second" },
new GroupVM { Name = "Third" }
};
}
public class GroupVM : ViewModelBase
{
private string _name;
public string Name
{
get => _name;
set { _name = value; OnPropertyChanged(); }
}
public ICommand Edit
{
get => null; //Command implementation
}
public bool CanEdit => SelectedRecord != null;
public ObservableCollection<RecordVM> Records { get; set; } = new ObservableCollection<RecordVM>()
{
new RecordVM { Name="Record1" },
new RecordVM { Name="Record2" },
new RecordVM { Name="Record3" }
};
private RecordVM _selectedRecord = null;
public RecordVM SelectedRecord
{
get => _selectedRecord;
set
{
_selectedRecord = value;
OnPropertyChanged();
OnPropertyChanged("CanEdit");
}
}
}
public class RecordVM : ViewModelBase
{
private string _name;
public string Name
{
get => _name;
set { _name = value; OnPropertyChanged(); }
}
}

How to put an Expander inside Datatemplate?

Strange one.
I have a contentcontrol on a WPF form, this loads a datatemplate within it.
This shows up fine (handwritten summary code so ignore errors/lack of attributes):
<DataTemplate>
<Label Content="Found datatemplate" />
</DataTemplate>
This however renders blank
<DataTemplate>
<Expander Header="Why dont I show">
<Label Content="Found datatemplate" />
</Expander>
</DataTemplate>
I have set the expander to visibile, isexpanded to true etc and no matter what it doesn't render at all.
Confused- is this just not possible?
I've recently done something similar to what you're describing and it worked for me. I have an ItemsControl that binds to a collection of view models, each of which contains a UserControl representing custom content. I implemented the ItemsControl.ItemTemplate to display the custom control inside an Expander like this:
<ItemsControl Margin="0,20,0,0" ItemsSource="{Binding ControlItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="0,0,0,0"
BorderBrush="#E7E7E7"
BorderThickness="0,1,0,0"
Padding="20,0">
<Expander Foreground="#E7E7E7"
IsExpanded="{Binding Path=IsExpanded,
Mode=TwoWay}">
<Expander.Header>
<Grid>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="24"
Text="{Binding Title}" />
</Grid>
</Expander.Header>
<DockPanel>
<ScrollViewer MinHeight="250">
<ContentControl Content="{Binding Control}" />
</ScrollViewer>
</DockPanel>
</Expander>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is what my view model looks like:
public class SidePanelControlItem : ModelBase
{
private bool _isExpanded;
public SidePanelControlItem(UserControl control)
{
if (control == null) { throw new ArgumentNullException("control");}
Control = control;
}
public string Title { get; set; }
public UserControl Control { get; private set; }
public bool IsExpanded
{
get { return _isExpanded; }
set
{
_isExpanded = value;
OnPropertyChanged("IsExpanded");
}
}
}

Multiple binding ViewModel to View MVVM

Please help me understand. I have a View PanoramaPage.xaml with two PanoramaItem. First item is a list of a news from a some web service, second item is a list of users the service. News and Users are differnt Models.
View:
<controls:PanoramaItem Header="users">
<ListBox Margin="0,0,-12,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel Width="311">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Aboutself}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
</controls:Panorama>
<controls:PanoramaItem Header="news">
<ListBox Margin="0,0,-12,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
Under MVVM I should have two ViewModel's for two controls News ListBox and Users ListBox or one ViewModel for one xaml PanoramaPage.xaml.
PanoramaPageViewModel
public class PanoramaPageViewModel : INotifyPropertyChanged
{
private ObservableCollection<User> userDataSource;
private ObservableCollection<News> newsDataSource;
public ObservableCollection<User> UserDataSource
{
get
{
if (this.userDataSource == null)
{
this.userDataSource = new ObservableCollection<User>();
}
return this.userDataSource;
}
}
public ObservableCollection<News> NewsDataSource
{
get
{
if (this.newsDataSource == null)
{
this.newsDataSource = new ObservableCollection<News>();
}
return this.newsDataSource;
}
}
// LoadUsers(), LoadNews(), etc
}
OR
UsersViewModel
public class UsersViewModel : INotifyPropertyChanged
{
private ObservableCollection<User> userDataSource;
public ObservableCollection<User> UserDataSource
{
get
{
if (this.userDataSource == null)
{
this.userDataSource = new ObservableCollection<User>();
}
return this.userDataSource;
}
}
//LoadUsers() etc
}
NewsViewModel
public class NewsViewModel : INotifyPropertyChanged
{
private ObservableCollection<News> newsDataSource;
public ObservableCollection<News> NewsDataSource
{
get
{
if (this.newsDataSource == null)
{
this.newsDataSource = new ObservableCollection<News>();
}
return this.newsDataSource;
}
}
//LoadNews() etc
}
What do you think?
Single ViewModel. Not each and every control of view has its own view model. You set the ViewModel as the DataContext of the whole view.
Even if you go with two viewmodels, you will need to have the parent viewmodel which will be containing the instances of these two viewmodels. This parent view model will serve as the Datacontext of whole view and the child controls will set their datacontext to these child viewmodels, so you will have to change your bindings also.
But single view single view model is what mvvm is.
Thanks

change the template of an item after clicking on it

i have a class named :
public class CountryTemplateSelector : ContentControl
{
public DataTemplate TrueTemplate
{
get;
set;
}
public DataTemplate FalseTemplate
{
get;
set;
}
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
Shopping_Ingredients itemAux = item as Shopping_Ingredients;
if (itemAux != null)
{
if (itemAux.IsMarked == true)
return TrueTemplate;
else
return FalseTemplate;
}
return base.SelectTemplate(item, container);
}
public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
{
return null;
}
protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);
ContentTemplate = SelectTemplate(newContent, this);
}
}
and a DataTemplate declared in App.xaml :
<DataTemplate x:Key="SelectorForCheckbox">
<local:CountryTemplateSelector Content="{Binding}">
<local:CountryTemplateSelector.TrueTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="82">
<CheckBox Name="cb1" FontSize="15" IsChecked="{Binding Path=IsMarked, Mode=TwoWay}" Margin="0,4" RenderTransformOrigin="0.485,0.365" VerticalContentAlignment="Bottom" />
<TextBlock Text="{Binding AmountToString}" Margin="15,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="24"/>
</StackPanel>
</DataTemplate>
</local:CountryTemplateSelector.TrueTemplate>
<local:CountryTemplateSelector.FalseTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="82">
<CheckBox Name="cb1" FontSize="15" IsChecked="{Binding Path=IsMarked, Mode=TwoWay}" Margin="0,4" RenderTransformOrigin="0.485,0.365" VerticalContentAlignment="Bottom" />
<TextBlock Text="TEST" Margin="15,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="24"/>
</StackPanel>
</DataTemplate>
</local:CountryTemplateSelector.FalseTemplate>
</local:CountryTemplateSelector>
</DataTemplate>
and a LongListSelector :
<toolkit:LongListSelector x:Name="recipe1" Background="Transparent"
ItemTemplate="{StaticResource SelectorForCheckbox}"
ListHeaderTemplate="{StaticResource citiesListHeader}"
ListFooterTemplate="{StaticResource citiesListFooter}"
GroupHeaderTemplate="{StaticResource groupHeaderTemplate}"
GroupItemTemplate="{StaticResource groupItemTemplate}" >
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
The LongListSelector launches ok, and the templates are shown ok. The problem is that i would like to be able to change the template of the specific item clicked. How can i do so?
We should be able to set the templates in code. See this StackOverflow question. Make sure that all the templates needed are resources in the App.xaml or in your specific UserControl. My example is from a button click, but the same approach should apply elsewhere in code. I'm not 100% certain it should be cast to ControlTemplate. It will probably very per template.
public void CLick_Method(object sender, RoutedEventArgs e)
{
this.recipe1.ItemTemplate = (ControlTemplate)Resources["SelectorForX"];
this.recipe1.ListHeaderTemplate= (ControlTemplate)Resources["NewListHeaderTemplate"];
// etc.
}

CellTemplateSelector won't choose template automatically

I have two templates for DataGridTemplateColumn
<DataTemplate x:Key="firstTemplate">
<UniformGrid Grid.Column="1" Columns="2">
<Label Background="{Binding Path=Color,
Converter={StaticResource gradientBrush}}"
Content="{Binding Path=Value}"
Style="{StaticResource WhiteCellLabelStyle}"
Visibility="Visible" />
</UniformGrid>
</DataTemplate>
<DataTemplate x:Key="secondTemplate">
<UniformGrid Grid.Column="1" Columns="{Binding Converter={StaticResource getColumnsAmount}}">
<Label Background="{Binding Path=ColorData_1.Color,
Converter={StaticResource gradientBrush}}"
Content="{Binding Path=ColorData_1,
Converter={StaticResource ValueRangeConvert}}"
Style="{StaticResource WhiteCellLabelStyle}"
Visibility="{Binding Path=ColorData_1.IsSelected,
Converter={StaticResource boolConvert}}" />
<Label Background="{Binding Path=ColorData_2.Color,
Converter={StaticResource gradientBrush}}"
Content="{Binding Path=ColorData_2,
Converter={StaticResource ValueRangeConvert}}"
Style="{StaticResource WhiteCellLabelStyle}"
Visibility="{Binding Path=ColorData_2.IsSelected,
Converter={StaticResource boolConvert}}" />
<Label Background="{Binding Path=ColorData_3.Color,
Converter={StaticResource gradientBrush}}"
Content="{Binding Path=ColorData_3,
Converter={StaticResource ValueRangeConvert}}"
Style="{StaticResource WhiteCellLabelStyle}"
Visibility="{Binding Path=ColorData_3.IsSelected,
Converter={StaticResource boolConvert}}" />
</UniformGrid>
</DataTemplate>
<DataGrid Name="dgLegend"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutoGenerateColumns="False"
Background="{x:Null}"
HeadersVisibility="None"
IsHitTestVisible="True"
IsReadOnly="True"
ItemsSource="{Binding}">
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto"
Header="exp"
IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Border Background="{Binding Path=Color>
<Label Content="{Binding Path=Color}" />
</Border>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*" Header="Range">
<DataGridTemplateColumn.CellTemplateSelector>
<local:LegendDisplayModeTemplateSelector
firstTemplate="{StaticResource firstTemplate}"
secondTemplate="{StaticResource secondTemplate}" />
</DataGridTemplateColumn.CellTemplateSelector>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
My TemplateSelector
public class LegendDisplayModeTemplateSelector : DataTemplateSelector
{
public DataTemplate firstTemplate
{
get;
set;
}
public DataTemplate secondTemplate
{
get;
set;
}
public DisplayMode displayMode
{
get;
set;
}
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
TSOptions opts = (TSOptions)item;
//some other code
}
}
The problem is the item in SelectTemplate(object item, DependencyObject container) always get null
I found the answer.
http://social.msdn.microsoft.com/Forums/en/wpf/thread/b47ac38a-077f-41da-99b1-8b88add693d8?prof=required
He used this way:
class UserCellEdit : DataTemplateSelector
{
public override DataTemplate
SelectTemplate(object item, DependencyObject container)
{
ContentPresenter presenter = container as ContentPresenter;
DataGridCell cell = presenter.Parent as DataGridCell;
Guideline_node node = (cell.DataContext as Guideline_node);
//,...... etc. the rest of the code
}
}
I used this solution:
public class EmployeeListDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
FrameworkElement element = container as FrameworkElement;
if (element != null && item != null && item is Employee)
{
Employee employee = item as Employee;
if (employee.Place == "UK")
return element.FindResource("UKdatatemp") as DataTemplate;
else
return element.FindResource("Otherdatatemp") as DataTemplate;
}
return null;
}
}

Resources