Can't bind a ContextMenu action to a Command - c#

I've searched and read anything I can about ContextMenus and binding, and how it's not in the tree... etc. So searching feels like I've exhausted it and just don't understand it.
I'm trying to get my ContextMenu AddTournamentCommand to work, but I simply can't get it to command. I recently found out the easy way through Data Sources to bind to objects, so if there's an easy way other than coding it by hand to wire it up, please let me know. This is what I have so far:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Models="clr-namespace:FumbblApiClient.Models" mc:Ignorable="d" x:Name="FumbblMainWindow" x:Class="FumbblApiClient.MainWindow"
Title="MainWindow" Height="499.45" Width="639" Loaded="Window_Loaded">
<Window.Resources>
<CollectionViewSource x:Key="groupViewSource" d:DesignSource="{d:DesignInstance {x:Type Models:Group}, CreateList=True}"/>
<CollectionViewSource x:Key="groupTournamentsViewSource" Source="{Binding Tournaments, Source={StaticResource groupViewSource}}"/>
</Window.Resources>
<Grid Margin="0,0,2,0">
<TabControl Margin="10">
<TabItem Header="Groups">
<Grid Background="#FFE5E5E5" DataContext="{StaticResource groupViewSource}">
<TextBox x:Name="GroupIdTextBox" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" TextWrapping="Wrap" Text="Group ID" VerticalAlignment="Top" Width="100" Grid.Column="1"/>
<Button Content="Fetch" HorizontalAlignment="Left" Margin="115,11,0,0" VerticalAlignment="Top" Width="61" Click="GroupFetch_Click" Grid.Column="1" Height="22"/>
<ListBox x:Name="groupListView" ItemsSource="{Binding}" Margin="10,38,0,10" SelectionMode="Single" HorizontalAlignment="Left" Width="166" SelectionChanged="GroupList_SelectionChanged">
</ListBox>
<Grid x:Name="grid1" Margin="181,38,10,0" VerticalAlignment="Top" Height="369">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Id:" Grid.Column="0" HorizontalAlignment="Left" Margin="3" Grid.Row="0" VerticalAlignment="Center"/>
<TextBox x:Name="idTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="0" Text="{Binding Id, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/>
<Label Content="Name:" Grid.Column="0" HorizontalAlignment="Left" Margin="3" Grid.Row="1" VerticalAlignment="Center"/>
<TextBox x:Name="nameTextBox" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="3" Grid.Row="1" Text="{Binding Name, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}" VerticalAlignment="Center" Width="120"/>
<Label Content="Tournaments:" HorizontalAlignment="Left" Margin="3" Grid.Row="2" VerticalAlignment="Center"/>
<ListBox x:Name="tournamentsListView" ItemsSource="{Binding Source={StaticResource groupTournamentsViewSource}}" Margin="3,3,-182,-260" SelectionMode="Multiple" Grid.Row="2" Grid.Column="1">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="UIElement.PreviewMouseRightButtonDown" Handler="EmptyHandler"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Add To Selected Tournaments" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=PlacementTarget.DataContext.AddTournamentCommand}"/>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
</Grid>
</Grid>
</TabItem>
<TabItem Header="Tournaments">
<Grid Background="#FFE5E5E5" Margin="0,0,0,-2">
<ListBox HorizontalAlignment="Left" Margin="10,10,0,10" Width="166"/>
</Grid>
</TabItem>
<TabItem Header="Teams">
</TabItem>
<Grid Margin="0,0,-10,10"/>
</TabControl>
</Grid>
</Window>
and in the Code Behind:
public partial class MainWindow : Window
{
[removed]
private ICommand addTournamentCommand;
public ICommand AddTournamentCommand
{
get
{
if(addTournamentCommand == null)
{
addTournamentCommand = new RelayCommand(OnTournamentAdded);
}
return addTournamentCommand;
}
}
private void OnTournamentAdded(object state)
{
}
}

PlacementTarget property is on Context Menu and not on window. Travel to ContextMenu and not to Window. Window anyhow doesn't lies in Visual Tree of ContextMenu so you can't reach to it using RelativeSource.
<ContextMenu>
<MenuItem Header="Add To Selected Tournaments"
Command="{Binding RelativeSource={RelativeSource
AncestorType={x:Type ContextMenu}},
Path=PlacementTarget.DataContext.AddTournamentCommand}"/>
</ContextMenu>
With above code you will get PlacementTarget's dataContext which will be ListBox's DataContext and if you haven't set explicitly DataContext on ListBox, it will inherit it from Window and your code will work fine.
UPDATE
You can store the Window DataContext in Tag of ListBox and bind with it.
<ListBox Tag="{Binding DataContext,
RelativeSource={RealtiveSource Mode=FindAncestor,
AncestorType=Window}}"/>
and in ContextMenu bind using Tag:
<ContextMenu>
<MenuItem Header="Add To Selected Tournaments"
Command="{Binding RelativeSource={RelativeSource
AncestorType={x:Type ContextMenu}},
Path=PlacementTarget.Tag.AddTournamentCommand}"/>
</ContextMenu>

Change like this,
<ContextMenu>
<MenuItem Header="Add To Selected Tournaments" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=AddTournamentCommand}"/>
</ContextMenu>

Related

UWP UserControl Resources Binding to x:Bind

In this xaml snippet I tried to specify the ViewModel and the Locator for the x DataType to change the bindings to x:Bind, but unfortunately that doesn't work here. Why can't I simply omit the specification of Source={StaticResource Locator} and address the whole thing via the x DataType, what am I doing wrong?
<DataTemplate x:Key="appointmentTemplate" >
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding CalendarUCView.GridTappedCommand, Source={StaticResource Locator}}"/>
</core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<ListView ItemsSource="{Binding Converter={StaticResource cellModelToEventsConverter}, Mode=TwoWay}"
VerticalAlignment="Top"
Grid.Row="0"
Style="{StaticResource appointmentCellListViewStyle}"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectedItem="{Binding CalendarUCView.SelectedAppointment, Source={StaticResource Locator}, Mode=TwoWay}">
<Interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding CalendarUCView.ItemTappedCommand, Source={StaticResource Locator}}"/>
</core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Grid.Row="1"
Text="{Binding Converter={StaticResource cellModelToDayConverter}, Mode=OneWay}"
Margin="4"/>
</Grid>
</DataTemplate>
I tryed:
<DataTemplate x:Key="appointmentTemplate"
x:DataType="viewModel:CalendarUCViewModel" >
and also:
<DataTemplate x:Key="appointmentTemplate"
x:DataType="locator:CalendarUCView" >
So usually I can do this:
Command="{x:Bind GridTappedCommand}"
instead of that:
Command="{Binding CalendarUCView.GridTappedCommand, Source={StaticResource Locator}}"
Or if I change the x:DataType to the View (x:DataType="local:CalendarUCView") and use in View:
public CalendarUCViewModel Vm
{
get => (CalendarUCViewModel)DataContext;
}
usually can do this:
Command="{x:Bind Vm.GridTappedCommand}"

How to access a page's datacontext from inside a listview?

I am using MVVM Cross to build a UWP application. I am having trouble binding a command to a button. Previously in the XAML page I used an interactivity to bind other commands. The issue here is that we are using a listview to present a user's "favorite list." The UnfavoriteCommand is in the ViewModel but never gets hit because User.Favorite list is in a model and does not have the "UnfavoriteCommand." How do I handle this binding issue using MVVM Cross?
<ListView
Grid.Row="0"
Grid.Column="0"
CanReorderItems="True"
CanDrag="True"
AllowDrop="True"
ItemsSource="{Binding User.FavoriteList}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left"
Margin="0, 0, 0, 0"
Height="25" >
<TextBlock Text="{Binding Description, Mode=TwoWay}"
VerticalAlignment="Center"
TextAlignment="Left"/>
</StackPanel>
<StackPanel VerticalAlignment="Center" Grid.Column="1" Grid.Row="0">
<Button Content=""
FontFamily="{StaticResource FontAwesomeFontFamily}"
BorderBrush="Black">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:EventTriggerBehavior.Actions>
<Core:InvokeCommandAction CommandParameter="{Binding}" Command="{Binding UnfavoriteCommand}"/>
<!--<Core:CallMethodAction TargetObject="{Binding}" MethodName="Unfavorite" />-->
<!--<Core:InvokeCommandAction Command="{Binding UnfavoriteCommand}" InputConverter="{StaticResource buttonConverter}"/>-->
</Core:EventTriggerBehavior.Actions>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Give your page a name and use ElementName binding.
<Core:InvokeCommandAction CommandParameter="{Binding}" Command="{Binding DataContext.UnfavoriteCommand, ElementName=PageName}"/>
This code is for a wpf applcation but I think it's the same with UWP applications, you should use RelativeSource to reference a distinct source or context, May be you has a ViewModel as (Interface only):
public class IAnyViewModel {
RelayCommand UnfavoriteCommand {get;}
ObservableCollection<UserFavorite> FavoriteList {get;set;}
}
And this class is assigned to page or window controll in constructor or by code some thing like this:
public constructorControl(){
this.DataContext = new AnyViewModel();
}
or by XAML.
<Page.DataContext>
<local:AnyViewModel></local:AnyViewModel>
</Page.DataContext>
Then you can reference to parent context using RelativeSource some like this:
<Core:InvokeCommandAction
Command="{Binding UnfavoriteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}">
I'm Assuming your control is Page.

Observable Collection to Tabcontrol binding

<TabControl HorizontalAlignment="Stretch" TabStripPlacement="Left" Margin="10,20,0,0" Name="tabControl2" ItemsSource="{Binding NotesObs}" VerticalAlignment="Stretch" MinHeight="80">
<TabItem Header="Contract Read and understood, proposal letter read and understood." Name="tabItem2" FontSize="14" IsEnabled="True">
<Grid>
<Border Name="b_desc"/>
<TextBox HorizontalAlignment="Stretch" Margin="0" Name="textBox5" Text="{Binding ContractText}"
VerticalAlignment="Stretch" FontSize="12" TextWrapping="Wrap"
AutoWordSelection="True" VerticalScrollBarVisibility="Auto"
AcceptsReturn="True"
Width="{Binding ElementName=b_desc, Path=ActualWidth}"
Height="{Binding ElementName=b_desc, Path=ActualHeight}"
MaxWidth="{Binding ElementName=b_desc, Path=Width}"
MaxHeight="{Binding ElementName=b_desc, Path=Height}" />
</Grid>
</TabItem>
</TabControl>
Above is my Xaml and the name of my ObsCollection is
public ObservableCollection<NotesDisplay> NotesObs { get; set; }
I have declared properly the ContractText column in the NotesDisplay Model. I cant get this to bind for some reason but this works in a datagrid. Can someone explain what I am doing wrong in my XAML?
Thanks
Edit: I have viewed the linked solution but tabs arent showing up when I run the program. They do showup in the display in xaml
<UserControl x:Class="CAT_Application_WPF.UI.NotesPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CAT_Application_WPF.UI"
xmlns:viewModel="clr-namespace:CAT_Application_WPF.ViewModel"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
xmlns:oxy="http://oxyplot.org/wpf"
d:DesignHeight="640">
<Grid Margin="0,0,0,0" Background="{DynamicResource {x:Static SystemColors.GradientActiveCaptionBrushKey}}" d:DataContext="{d:DesignInstance viewModel:NotesPageViewModel}" >
<Grid.RowDefinitions>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TabControl HorizontalAlignment="Stretch" ItemsSource="{Binding NotesObs}" TabStripPlacement="Top" x:Name="_tabControl" VerticalAlignment="Stretch" MinHeight="80" Grid.ColumnSpan="2" Margin="121,28,279,-28">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<TextBlock Text="{Binding ContractText}"/>
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock>
This is <TextBlock Text="{Binding EMSText}"/>
</TextBlock>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</UserControl>
Now it's quite ok but you must remove your TextBlock inside another TextBlock stuff.
You can change
<TextBlock>
<TextBlock Text="{Binding ContractText}"/>
</TextBlock>
to
<TextBlock Text="{Binding ContractText}"/>
And
<TextBlock>
This is <TextBlock Text="{Binding EMSText}"/>
</TextBlock>
to something similar to
<StackPanel Orientation="Horizontal">
<TextBlock>This is</TextBlock>
<TextBlock Text="{Binding EMSText}"/>
</StackPanel>

WPF ComboBox with CheckBox - Collapsed display value

I have a ComboBox that has an ItemTemplate with a CheckBox in it (read Dropdown CheckBoxList). I basically want to have a separate binding for the text in the combobox (both when an item is selected, and if an item isn't selected). I've tried a few different methods but either can't seem to get them to work with my setup, or can't find they have some issues. I've even tried a few mixes and matches of them. Usually I find they either don't work when an item isn't specifically selected (which could be possible if the user checks a few boxes then clicks out of the ComboBox), or aren't updating the text properly.
My xaml is this (the items of focus are the DataTemplates with the ComboBoxes in them):
<UserControl x:Class="BestClient.ucReportViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:BestClient"
mc:Ignorable="d"
d:DesignHeight="315" d:DesignWidth="388" Background="#FFD7DFEC">
<UserControl.Resources>
<DataTemplate x:Key="datetime">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<DatePicker Tag="{Binding rfParameter}" SelectedDate="{Binding rfValues, Mode=TwoWay}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="office">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox x:Name="officeComboBox" Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.OfficeList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2" x:Name="CheckBox" Checked="OfficeCheckBox_Checked"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="carrier">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<ComboBox Tag="{Binding rfParameter}" Width="200" ItemsSource="{Binding Path=DataContext.CarrierList, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay}" VerticalAlignment="Center">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Tag="{Binding id}" IsChecked="{Binding isSelected}" Width="200" Content="{Binding value}" Margin="2"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="defaultTemplate">
<StackPanel Orientation="Horizontal" Height="35">
<TextBlock Text="{Binding rfName}" Width="100" VerticalAlignment="Center" />
<TextBox Tag="{Binding rfParameter}" Width="200" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
<local:ReportFilterTemplateSelector x:Key="ReportFilterTemplateSelector" />
</UserControl.Resources>
<Grid x:Name="ReportViewer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Margin="10" TextWrapping="Wrap" Text="Select a Report:"/>
</Viewbox>
<ComboBox Grid.Column="1" Margin="10" Grid.ColumnSpan="2" ItemsSource="{Binding ReportList}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedItem="{Binding SelectedReport}" VerticalContentAlignment="Center" />
<ListView x:Name="FilterList" Margin="10,0" Grid.Row="1" Grid.ColumnSpan="3" ItemTemplateSelector="{StaticResource ReportFilterTemplateSelector}" ItemsSource="{Binding reportFilters, Mode=TwoWay}" />
<Button Command="{Binding OpenReport}" Content="Open Report" Grid.Column="2" Margin="10" Grid.Row="2" VerticalAlignment="Stretch"/>
</Grid>
</UserControl>
Ideally, I'd like to bind the display text of the combobox with the OfficeListValues method in my ViewModel.
{Binding Path=DataContext.OfficeListValues, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}
Any help would be appreciated!

How to align TextBlock = Stretch in a listbox template?

I'm trying to create a listbox template (for the items). This is what I've got.
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="TEKS" FontSize="20" FontWeight="Bold" Background="#FF502F8F" Foreground="White" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" TextAlignment="Center" />
<TextBlock Text="{Binding Level}" FontSize="24" Background="#FF058C44" HorizontalAlignment="Center" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" Foreground="White" TextAlignment="Center" FontFamily="Segoe UI Light" />
</StackPanel>
<TextBlock Grid.Column="1" Text="{Binding Owner}" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="44,39,82,103" Style="{DynamicResource ListBoxStyle}"/>
</Grid>
And this is image how it looks.
Can you see the textblock extends more the width? I want to show the string wrap inside the listbox. What am I doing wrong?
Disable horizontal scrolling:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
Enable text wrapping (already the case):
<TextBlock TextWrapping="Wrap" ...>

Categories

Resources