We Keep Coding

WPF Data trigger to apply label and child?

i have the following xaml where if Status is OK then label background is green, and if ERROR label background in red, this works fine for the parent label, but when i add a child i also want that to adopt the parent background color? is there a way to allow the datatrigger to act for both parent and child labels ?
heres the xaml
<Window x:Class="wpfdemo.MainWindow"
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:local="clr-namespace:wpfdemo"
mc:Ignorable="d"
Title="MainWindow" Height="50" Width="50" SizeToContent="WidthAndHeight" ResizeMode="NoResize" Topmost="True" AllowsTransparency="True" WindowStyle="None" Background="Transparent">
<ItemsControl ItemsSource="{Binding Path=Parents}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:Parent}">
<Grid>
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Click Me" Click="Button_Click" />
</ContextMenu>
</Grid.ContextMenu>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="ParentColumn" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Parent label -->
<Label Content="{Binding Path=Name}"
x:Name="Label" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Black" BorderThickness="1" FontFamily="Verdana" Foreground="White"/>
<!-- Errors -->
<ItemsControl ItemsSource="{Binding Path=Errors}"
Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:Child}">
<Label Content="{Binding Path=Name}"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Black" BorderThickness="1" FontFamily="Verdana" Foreground="White"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<DataTemplate.Triggers>
<!-- Parent is ok -->
<DataTrigger Binding="{Binding Path=Status}"
Value="OK">
<Setter TargetName="Label" Property="Background" Value="#BF008000" />
</DataTrigger>
<!-- Parent is error -->
<DataTrigger Binding="{Binding Path=Status}"
Value="ERROR">
<Setter TargetName="Label" Property="Background" Value="#BFFFFF00" />
<Setter TargetName="Label" Property="Foreground" Value="Black" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks

TargetName is control's name,not type.
try :
<DataTemplate >
<Label x:Name="ChildLabel" Content="{Binding Path=Name}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=DataContext.Status,RelativeSource={ RelativeSource Mode=TemplatedParent}}" Value="OK">
<Setter TargetName="ChildLabel" Property="Background" Value="#BF008000" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

WPF: ComboBox: exposing DataTemplate bindings in Style / ControlTemplate

Lets say I have a sample ComboBox defined like this.
<ComboBox ItemsSource="{Binding Path=Bikes}"
HorizontalAlignment="Stretch">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Ellipse Fill="{DynamicResource AccentColorBrush}"
Height="15"
Width="15"
VerticalAlignment="Center"/>
<TextBlock Text="{Binding Type}"
Margin="15, 0, 0, 0"
FontWeight="SemiBold"
Foreground="{DynamicResource AccentColorBrush}"
VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
What I would like to do is to wrap it in a Style, but expose the ItemSource property of ComboBox and Text property within DataTemplate, so that I can Bind to different properties each time I use ComboBox.

I can suggest you to create a combo-box style that will select the template of its combo-item using the ViewModel-First approach. So there will be number of data-templates each of wich will relate to specific view-model.
<Window x:Class="WpfViewConstructorCall.MainWindow"
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:local="clr-namespace:WpfViewConstructorCall"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="525"
Height="350"
mc:Ignorable="d">
<Window.Resources>
<!--Combo-item data-template wich is defining the final item view-->
<DataTemplate x:Key="ComboItemContentTemplate">
<StackPanel Orientation="Horizontal">
<Ellipse Width="15"
Height="15"
VerticalAlignment="Center"
Fill="GreenYellow" />
<TextBlock Margin="15, 0, 0, 0"
VerticalAlignment="Center"
FontWeight="SemiBold"
Foreground="Red"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
<!--Combo-item data-template wich relates to ItemA view-model-->
<DataTemplate DataType="{x:Type local:ItemA}">
<ContentControl Content="{Binding Name}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--Combo-item data-template wich relates to ItemB view-model-->
<DataTemplate DataType="{x:Type local:ItemB}">
<ContentControl Content="{Binding Kind}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--Combo-item data-template wich relates to ItemC view-model-->
<DataTemplate DataType="{x:Type local:ItemC}">
<ContentControl Content="{Binding Type}"
ContentTemplate="{StaticResource ComboItemContentTemplate}" />
</DataTemplate>
<!--main Combo-item data-template-->
<DataTemplate x:Key="ComboItemDataTemplate">
<ContentControl Content="{Binding}" />
</DataTemplate>
<!--Combo style-->
<Style x:Key="ComboBoxStyle"
TargetType="ComboBox">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="ItemTemplate" Value="{StaticResource ComboItemDataTemplate}" />
</Style>
</Window.Resources>
<Grid>
<Grid.DataContext>
<local:GridDataContext />
</Grid.DataContext>
<StackPanel>
<!--Combo(s) with specific source definition-->
<ComboBox x:Name="A"
DisplayMemberPath="Name"
ItemsSource="{Binding ItemsA}"
SelectedValuePath="Name"
Style="{StaticResource ComboBoxStyle}" />
<ComboBox x:Name="B"
DisplayMemberPath="Kind"
ItemsSource="{Binding ItemsB}"
SelectedValuePath="Kind"
Style="{StaticResource ComboBoxStyle}" />
<ComboBox x:Name="C"
DisplayMemberPath="Type"
ItemsSource="{Binding ItemsC}"
SelectedValuePath="Type"
Style="{StaticResource ComboBoxStyle}" />
</StackPanel>
</Grid></Window>
In case you will have an additional combo-item's view model you will add a data-template which will relate to that specific view-model and will define its view.
Let me knnow if you need more examples.
Best regards.

Why are ListView and grouped CollectionViewSource not showing any items?

Here is code (minified):
<Page
x:Class="Compote.HubPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Compote"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding HubViewModel, Source={StaticResource Locator}}"
mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<DataTemplate x:Key="DefaultItemTemplate">
<Border Margin="0,0,0,9.5" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Grid>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" Height="170"/>
<StackPanel Margin="15,12" VerticalAlignment="Bottom">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14.5" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="{Binding Name}" Style="{ThemeResource CustomListViewItemTextBlockStyle}" />
</StackPanel>
<TextBlock Grid.Column="2" Text="{Binding Price, Converter={StaticResource PriceConverter}}" Style="{ThemeResource CustomListViewItemSecondaryTextBlockStyle}"/>
</Grid>
<TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}" TextTrimming="CharacterEllipsis" />
<TextBlock Text="{Binding Weight, Converter={StaticResource WeightConverter}}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<CollectionViewSource x:Key="CollectionViewSourceCategories" Source="{Binding Categories}" IsSourceGrouped="True" ItemsPath="Items" />
</Page.Resources>
<ListView AutomationProperties.AutomationId="ItemListViewSection4"
AutomationProperties.Name="Items In Group"
SelectionMode="None"
IsItemClickEnabled="True"
ItemsSource="{Binding Source={StaticResource CollectionViewSourceCategories}}"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
ItemTemplate="{StaticResource DefaultItemTemplate}" AllowDrop="True">
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
As you can see, the CollectionViewSource is binded to the ListView and its IsSourceGrouped property is set to True. Categories contains 2 categories with 3 items in each category. But the ListView doesn't show anything, it's totally empty. What's wrong?

you need to add an itemPresenter in the GroupStyle.
<ListView Name="MyList" ItemsSource="{Binding Source={StaticResource CollectionViewSourceCategories}}" Grid.Row="1" Grid.Column="0">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- ItemsPresenter -->
<ItemsPresenter />
<TextBlock Text="{Binding Name}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="NAME" DisplayMemberBinding="{Binding name}" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
Something else that might be helpful if you're grouping items Is to add a PropertyGroupDescription to your collectionViewSource:
First add this to your declarations:
xmlns:dat="clr-namespace:System.Windows.Data;assembly=PresentationFramework" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
then your CollectionViewSource:
<CollectionViewSource x:Key="CollectionViewSourceCategories" Source="{Binding Categories}">
<CollectionViewSource.GroupDescriptions>
<dat:PropertyGroupDescription PropertyName="Categories" />
</CollectionViewSource.GroupDescriptions>
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Names" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
This will group by your category, then sort by names. here's the link explaining it:
https://msdn.microsoft.com/en-us/library/ff407126(v=vs.100).aspx
hope this helps!

You have to bind to the View property of the CollectionViewSource:
ItemsSource="{Binding Source={StaticResource CollectionViewSourceCategories}, Path=View}"

WPF : How to bind Button's visibility inside ListBox ItemsControl using selecteditem information ?

I have a list box binds to a ObservableCollection of Items. Each listboxItem contains a few textblocks and a few buttons. I would like to show the buttons inside the listboxItem only when the listbox item is selected or hightlight. If the listbox item is not highlighted, the button should be hidden. I tried to use datatrigger to bind to the IsSelected property. However it does not work. Please advice. thanks
<ListBox Name="LayoutListBox" SelectedItem="{Binding Path=SelectedLayout, Mode=TwoWay}" ItemsSource="{Binding Layouts}" SelectionMode="Single" HorizontalContentAlignment="Stretch">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Gray"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray"/>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border HorizontalAlignment="Stretch" Margin="2" CornerRadius="2" BorderBrush="#80808080" BorderThickness="1" Background="GhostWhite">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height ="*"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="1" Grid.Column="3" DockPanel.Dock="Right">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Visibility="{Binding Path=ViewName, Converter={StaticResource Converter}, ConverterParameter=false}">
<Button ToolTip="Save">
<Image Source="/Common.View;component/LayoutManager/View/Images/PushPin.png" />
</Button>
<Button Click="EditButtonClick" ToolTip="Edit">
<Image Source="/Common.View;component/LayoutManager/View/Images/pencil.png" />
</Button>
<Button Click="DeleteButtonClick" ToolTip="Delete">
<Image Source="/Common.View;component/LayoutManager/View/Images/cross.png" />
</Button>
</StackPanel>
</DockPanel>
</Grid>
</DockPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

I attached a simple example to show button in listbox item when you selected. it should have to bind as RelativeSource and have to use Converter
Example:
<Window.Resources>
<BooleanToVisibilityConverter x:Key="booleanVisibleConverter" />
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding ObservableCollection}" Grid.Row="0" SelectedItem="{Binding Path=Item}"
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 booleanVisibleConverter}}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

You can create a style to associate with each of your buttons as follows:
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},
Path=IsSelected}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>

How Does This Grid App Template Scroll without a Scrollviewer? (C#/XAML Windows 8.1)

I've been trying to understand Scrollviewers, and thought I'd take a look at Microsoft's template for a Grid App for 8.1, whose content extends off the screen. What's odd is that there doesn't seem to even be a Scrollviewer in the XAML page. Can anyone tell me what is enabling the scrolling?
<Page
x:Name="pageRoot"
x:Class="GridApp.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridApp"
xmlns:data="using:GridApp.Data"
xmlns:common="using:GridApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<x:String x:Key="ChevronGlyph"></x:String>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>

If we go check out the default GridView template and look for the ItemsPresenter we see it's embedded in a ScrollViewer at the template level. Since now we know there's one there, if we look up towards the top in the Setter declarations we've got some Properties available to us to interact with that ScrollViewer from the GridView itself by seeing;
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
So if we wanted that GridView to not scroll anymore we could tell it not to like;
<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
since it's set to "Auto" at the template level by default.
That's the thing about templates, sometimes it just takes digging one level deeper. Hope this helps, cheers.