I've got an ItemsControl for basically an array of comboboxes, textboxes and buttons:
The XAML for that bottom section is all within the ItemsControl: (Having a problem with the button, the last element)
<ItemsControl Grid.Row="2"
ItemsSource="{Binding CommandLinesOc}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Content="Send Command:"
HorizontalAlignment="Right"
Grid.Row="1" />
<ComboBox Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding ChromaCommandsCvs.View}"
SelectedItem="{Binding SelectedChromaCommand, UpdateSourceTrigger=PropertyChanged}" />
<Label Grid.Column="2"
Grid.Row="1"
Content="Parameter:"
HorizontalAlignment="Right" />
<TextBox Grid.Column="3"
Grid.Row="1"
Text="{Binding Parameter, UpdateSourceTrigger=PropertyChanged}" />
<Button Grid.Column="4"
DataContext="ChromaGUI.MainWindow"
Grid.Row="1"
Content="Send"
HorizontalAlignment="Center"
FontSize="15"
Command="{Binding RelativeSource=
{RelativeSource Mode=FindAncestor,
AncestorType={x:Type Window}},
Path=DataContext.SendMessageCommand}"
CommandParameter="{Binding FullCommandString}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
As you can see, I've got the button element bound to a relay command. I had to use the main window relative source since the ItemsControl is setting the data context to an item in CommandLinesOc.
That all works fine - the problem is that CommandParameter seems to be inheriting the same relative source context, as I can't get FullCommandString (or any other property of one of the items in the observable collection, like Parameter or SelectedChromaCommand) to resolve to anything. So my question is, can I (and how do I) set the data context for the CommandParameter to be what the ItemsControl is giving me, while keeping the context for the Command the parent window?
Currently, you have the button DataContext set to a string "ChromaGUI.MainWindow" :
<Button DataContext="ChromaGUI.MainWindow"
.......
Command="{Binding RelativeSource=
{RelativeSource Mode=FindAncestor,
AncestorType={x:Type Window}},
Path=DataContext.SendMessageCommand}"
CommandParameter="{Binding FullCommandString}"/>
String doesn't have property FullCommandString, so your command parameter binding will fail. Simply remove DataContext setting in the button to make it use default DataContext which is corresponding item in the ItemsSource :
<Button
.......
Command="{Binding RelativeSource=
{RelativeSource Mode=FindAncestor,
AncestorType={x:Type Window}},
Path=DataContext.SendMessageCommand}"
CommandParameter="{Binding FullCommandString}"/>
Related
I have a ListBox :
<ListBox Margin="10" Padding="10" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- Data template -->
<Grid>
<Grid.ColumnDefinitions>
<!--Image-->
<ColumnDefinition Width="auto" />
<!--Info-->
<ColumnDefinition Width="500" />
<!--Options-->
<ColumnDefinition Width="*" /
</Grid.ColumnDefinitions>
<Image Height="50" Width="50" />
<StackPanel Grid.Column="1" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="ID: " />
<TextBlock Text="{Binding ID}" />
</StackPanel>
</StackPanel>
<Button Grid.Column="2" Content="{Binding Status}" Command="{Binding CompleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainPageViewModel}}}" CommandParameter="{Binding}" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need my CommandParameter be the ListItem of this ListBox.
Set the AncestorType to ListBox and include DataContext in the path:
<Button ... Command="{Binding DataContext.CompleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" CommandParameter="{Binding}" HorizontalAlignment="Right"></Button>
Then the Command binding should work provided that the CompleteCommand property belongs to the same class as the Items property
So i built a user control with his relative view model. This control must be shown when a button is clicked inside a ComboBox. To give you a better idea i'll post my code:
<ItemsControl Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" HorizontalAlignment="Center"
ItemsSource="{Binding MyItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Margin="7,0,10,0">
<Grid.Resources>
<CollectionViewSource x:Key="cvs" Source="{Binding CBSource}" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>
<Label HorizontalContentAlignment="Center" Grid.Column="0" Content="{Binding FirstProperty}"/>
<Label HorizontalContentAlignment="Center" Grid.Column="1" Content="{Binding SecondProperty}"/>
<Label HorizontalContentAlignment="Center" Grid.Column="2" Content="{Binding ThirdProperty}"/>
<ComboBox HorizontalAlignment="Center" Grid.Column="2" Width="140" Visibility="{Binding HasCombobox, Converter={StaticResource BoolToVis}}">
<ComboBox.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource cvs}}" />
<ComboBoxItem>
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Content="{x:Static prop:Resources.INSERT_BTN}" Command ="This will call CustomUserControl"></Button>
</ComboBoxItem>
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is the template of my ItemsControl. This control show a ComboBox whenever a property is verified. So in my view, i have no idea of how many ComboBox i will have and where those will be placed (the combination of all this ItemsControl create a sort of grid). My goal is to show a little view with a variable placement target (it must pop near the ComboBox that called it).
Requirements : I need a way to place my CustomUserControl.xaml inside the ItemControl that i described above, with a dynamic placement target. The button that will call this control, will have an ICommand dedicated to execute the routine to set and show the CustomUserControl
Your requirements are a bit unclear but you could use a Popup element and binds its PlacementTarget to element relative to which the Popup is positioned when it opens: https://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.popup.placementtarget(v=vs.110).aspx
You can then use the ContentControl in the Popup and bind its Content property to a property that returns a view model (or a UserControl) that defines the contents to be dislayed in the Popup. Something like this:
<Button x:Name="btn" Content="Button" />
<Popup IsOpen="True" StaysOpen="True"
PlacementTarget="{Binding ElementName=btn}"
Placement="Top">
<Border BorderThickness="1" Width="100" Height="100">
<ContentControl Content="{Binding TheControlProperty}" />
</Border>
</Popup>
I am learning navigation with MVVM as seen here:
Navigation with MVVM
In this tutorial, binding a command for button control is implemented by using ItemsControl like this:
<Window.Resources>
<DataTemplate DataType="{x:Type local:HomeViewModel}">
<local:HomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ProductsViewModel}">
<local:ProductsView />
</DataTemplate>
</Window.Resources>
<DockPanel>
<Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">
<ItemsControl ItemsSource="{Binding PageViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<ContentControl Content="{Binding CurrentPageViewModel}" />
</DockPanel>
If I understand it correctly, it iterates through collection of PageViewModels and binds a button command for every VIewModel. This example works fine and I am able to switch between pages with no problem.
However, I don't want to create buttons iteratively. I want to have two buttons inside a grid with the same command that switches views as in example above. Something like this:
<Window.Resources>
<DataTemplate DataType="{x:Type local:HomeViewModel}">
<local:HomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ProductsViewModel}">
<local:ProductsView />
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Content="{Binding HomeView.Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"/>
<Button Grid.Column="1"
Content="{Binding ProductsView.Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"/>
</Grid>
But this doesn't work as I expected. I am able to bind View's names but not the Command. Clicking buttons is doing nothing. DataContext is set to an instance of my ApplicationViewModel. What could be a problem here?
The problem is in the CommandParameter="{Binding }", in the first example that binding is pointing to ItemsSource="{Binding PageViewModels}". The second example doesn't have that part, so that binding is failing.
EDIT>>>>
To clarify, you must bind the command parameter to an instanciated viewModel in your datacontext.
ViewModel:
public IPageViewModel homeViewModel{get; set;}
public IPageViewModel productsViewModel{get; set;}
...
IPageViewModel homeViewModel = new HomeViewModel();
IPageViewModel productsViewModel = new ProductsViewModel();
View:
CommandParameter="{Binding DataContext.homeViewModel, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
I dont have a code editor right now, but hope it helps.
I'm working with a WPF application to manage our main software's versions. This application has a ListBox, and I set the ListBox.DataTemplate to each ListBoxItem has a Label and 2 Buttons inside it.
The following code shows my ListBox code:
<ListBox Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}" ItemsSource="{Binding Path=PatchList, Mode=TwoWay}" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Path=VersionNumber}" HorizontalAlignment="Left" Foreground="#FFFFFF" FontSize="19" />
<Button Grid.Column="1" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Release" Command="{Binding Path=DataContext.ReleaseVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Release}" />
</Button>
<Button Grid.Column="2" Width="25" Height="25" Template="{StaticResource OnMouseOverListBoxitem}" ToolTip="Trash" Command="{Binding Path=DataContext.DeleteVersionCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" HorizontalAlignment="Right" d:DataContext="{d:DesignInstance {x:Type ViewModels:MainWindowViewModel}}" CommandParameter="{Binding}">
<ContentControl Template="{StaticResource Trash}" />
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that I would like to show the label and the buttons ONLY for the Selected ListBoxItem.
By the way, I'm using bindings, and if you see some different code it's because I'm also using MahApp.Metro for Windows8-style.
Any suggestions?
Thank you.
try this one.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Fnts}" Grid.Row="0" SelectedItem="{Binding Path=SelectedVersion}"
SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter1}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Depending on bound item - I use different data templates to display data. Now I also need to modify behavior/style of treeview itself. Is it possible to switch style for items depending on object property? Right now it's only one specified: ItemContainerStyle="{StaticResource TreeViewItemStyleFolder}"
I would like to create second style TreeViewItemStyleDocument
Current XAML (with custom style and template selector)
<sdk:TreeView ItemsSource="{Binding Items}"
Grid.Row="1"
Style="{StaticResource TreeViewStyle1}"
ItemContainerStyle="{StaticResource TreeViewItemStyleFolder}"
>
<sdk:TreeView.ItemTemplate>
<sdk:HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
<DocumentManagement:DocumentTreeViewItemTemplateSelector
Content="{Binding}">
<DocumentManagement:DocumentTreeViewItemTemplateSelector.FolderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- FOLDER ICON AND CAPTION -->
<Image Source="{Binding IconSource}" Width="24" Height="24" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Left"
Grid.Column="1" Margin="5,0"
Text="{Binding Folder.FolderId}" FontSize="12" Foreground="#2C2C2C" />
</Grid>
</DataTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector.FolderTemplate>
<DocumentManagement:DocumentTreeViewItemTemplateSelector.DocumentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock FontSize="10" Foreground="#2C2C2C">
<Run Text="Added by" />
<Run Text="{Binding Document.MEMUser.UserName}" />
<Run Text=" on " />
<Run Text="{Binding CreatedOn, Converter={StaticResource DateTimeToStringConverter}}" />
</TextBlock>
<!--BIND COMMANDS TO PARENT ViewModel to process operations-->
<Button Content="Delete" Command="{Binding DataContext.DeleteCommand, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
<Button Content="Download" Command="{Binding DataContext.DownloadCommand, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
</StackPanel>
</Grid>
</DataTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector.DocumentTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector>
</sdk:HierarchicalDataTemplate>
</sdk:TreeView.ItemTemplate>
</sdk:TreeView>
EDIT:
Added triggers to switch ItemContainerStyle based on property but I think problem is that I'm using hieratchical data template. If I put breakpoint on IsFolder property - there is no source object.
<sdk:TreeView x:Name="DocumentsTreeView" ItemsSource="{Binding Items}"
Grid.Row="1"
Style="{StaticResource TreeViewStyleTransparent}">
<!-- ItemContainerStyle="{StaticResource TreeViewItemStyleFolders}"-->
<i:Interaction.Triggers>
<ei:DataTrigger Value="False" Binding="{Binding IsFolder}">
<ei:ChangePropertyAction TargetName="DocumentTreeView" PropertyName="ItemContainerStyle"
Value="{StaticResource TreeViewItemStyleFolders}" />
</ei:DataTrigger>
<ei:DataTrigger Value="True" Binding="{Binding IsFolder}">
<ei:ChangePropertyAction TargetName="DocumentTreeView" PropertyName="ItemContainerStyle"
Value="{StaticResource TreeViewItemStyleDocuments}" />
</ei:DataTrigger>
</i:Interaction.Triggers>
<sdk:TreeView.ItemTemplate>
<sdk:HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
<DocumentManagement:DocumentTreeViewItemTemplateSelector
Content="{Binding}">
<DocumentManagement:DocumentTreeViewItemTemplateSelector.FolderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- FOLDER ICON AND CAPTION -->
<Image Source="{Binding IconSource}" Width="24" Height="24" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Left"
Grid.Column="1" Margin="5,0"
Text="{Binding Folder.FolderId}" FontSize="12" Foreground="#2C2C2C" />
</Grid>
</DataTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector.FolderTemplate>
<DocumentManagement:DocumentTreeViewItemTemplateSelector.DocumentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock FontSize="10" Foreground="#2C2C2C">
<Run Text="Added by" />
<Run Text="{Binding Document.MEMUser.UserName}" />
<Run Text="on" />
<Run Text="{Binding Document.CreatedOn, Converter={StaticResource DateTimeToStringConverter}}" />
</TextBlock>
<!--BIND COMMANDS TO PARENT ViewModel to process operations-->
<Button Content="Delete" Command="{Binding DataContext.DeleteCommand, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
<Button Content="Download" Command="{Binding DataContext.DownloadCommand, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
</StackPanel>
</Grid>
</DataTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector.DocumentTemplate>
</DocumentManagement:DocumentTreeViewItemTemplateSelector>
</sdk:HierarchicalDataTemplate>
</sdk:TreeView.ItemTemplate>
</sdk:TreeView>
If I understand correctly you want style to change dynamically based on a property value and you want this to be performed globally on everyitems on the page referencing the given style?
If that is the case I would suggest you looking into storyboards and states within Expression Blend. I do not see you mentioning Blend in your description. Are you using it? The treeview has many items that can be customized and some that are harder. I had an issue last week that my hyperlinks that were nested within a treeview could not effectively change the font color. I would probably been able to do it spending more time on the design but I changed the design intent instead.
The preview version of Blend for Silverlight 5 is free until June 2013 according to my install.
http://www.microsoft.com/en-us/download/details.aspx?id=9503
Good luck,