I've got a list box with SelectionMode set to Single and item template looking like this:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="100" Margin="10" Cursor="Hand" >
<Image Source="/Assets/Images/folder_80closed.png" HorizontalAlignment="Center" />
<TextBox Text="{Binding Name}" BorderThickness="0" TextAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Is there any way to change the value of image Source property in XAML based on if the item is selected or not? Something like pic bellow, where item4 is selected.
You may use an Image Style with a DataTrigger on the IsSelected property of the current ListBoxItem:
<Image HorizontalAlignment="Center">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source"
Value="/Assets/Images/folder_80closed.png"/>
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="True">
<Setter Property="Source"
Value="/Assets/Images/some_other_image.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Related
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" Width="150" >
<TextBlock MaxWidth="125" Name="name" Text="{Binding name}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" Margin="0,4,4,4" />
</StackPanel>
<Button Command="{buttontext}" Visibility="{Binding IsAvailable, Converter={uil:BoolToVisibilityConverter}}">
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="{Binding Isenable}"/>
</Style>
</ListBox.ItemContainerStyle>
I am unable to disable the text(Grey out) but as for the button is working fine.
Do anyone know how to solve this issue?
Hi Chris, i have referred to the link. i tried using
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding name}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
but it is still not working. have any idea on this?
TextBlock doesn't support IsEnabled. The easiest fix would be to change your TextBlock to a Label
Our project has a DataGrid that displays an image along with text in one of the columns. When a row is selected, since it's highlighted, the image is not visible correctly. Hence we want to change the image only for the selected row.
I know how to change the property such as background of the dataGridCell using <Style.Triggers>; but cannot figure out how to change Image that is embedded inside the <DataGridTemplateColumn.CellTemplate>. Can you please help me with this?
<DataGrid Name="dgCPAGrid" Grid.Row="2" Grid.Column="0" ItemsSource="{Binding CPAListDisplay, Mode=OneWay}" Margin="0,5,0,5" AutoGenerateColumns="False"
IsReadOnly="True" SelectionMode="Single"
SelectedItem="{Binding SelectedCPA, Mode=TwoWay}"
IsSynchronizedWithCurrentItem="False" AlternatingRowBackground="White"
HorizontalGridLinesBrush="Gray" VerticalGridLinesBrush="Gray" >
<DataGrid.Resources>
<Style x:Key="DGCellMGA" TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Setter Property="ToolTipService.IsEnabled" Value="False" />
<Setter Property="Background" Value="#f8f8d2" />
<Setter Property="TextBlock.TextAlignment" Value="Right"/>
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="{b:CaptionBinding gridHeaderCPAName}" Width="Auto" MinWidth="125">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CPAName}" />
<Image Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="{b:CaptionBinding gridHeaderCPAMGA}" Binding="{Binding MgaY1P}" MinWidth="50" Width="*" CellStyle="{StaticResource DGCellMGA}" />
</DataGrid.Columns>
</DataGrid>
Inside your cell's Template, add another Trigger (this time, a DataTrigger) that listens to the IsSelected property of the containing DataGridRow. Inside the DataTrigger, use the TargetName property of the Setter to tell it to modify the Source property of the Image (you have to give it an x:Name first):
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CPAName}" />
<Image x:Name="image" Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
Value="True">
<Setter TargetName="image"
Property="Source"
Value="/Images/Whateveryourotherimageisnamed.gif" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I would like to bind content of contrentcontrol to selectedvalue of combobox and set visibility according to trigger. But it is not work. What is the problem ?
<DockPanel>
<ComboBox x:Name="combobo" Padding="4" Width="120" HorizontalAlignment="Left" Margin="30,10,0,0" VerticalAlignment="Center">
<ComboBoxItem>0</ComboBoxItem>
<ComboBoxItem>1</ComboBoxItem>
</ComboBox>
<ContentControl x:Name="contentcontrol" Grid.Row="0" Grid.Column="2" Content="{Binding ElementName=combobo, Path=SelectedIndex}" Margin="0,10,0,0" VerticalAlignment="Center"
Visibility="Visible">
<ContentControl.ContentTemplate>
<DataTemplate>
<DockPanel x:Name="WarningGrid" VerticalAlignment="Top" Visibility="Collapsed">
<TextBlock Text="Warning" VerticalAlignment="Center"></TextBlock>
</DockPanel>
<DataTemplate.Triggers>
<Trigger Property="ContentControl.Content" Value="0">
<Setter TargetName="WarningGrid" Property="Visibility" Value="Visible" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</DockPanel>
I also tried it with SelectedIndex but also trigger is not working.
Thanks.
Change the Trigger to DataTrigger
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Content, RelativeSource={RelativeSource AncestorType={x:Type ContentControl}}}" Value="0">
<Setter TargetName="WarningGrid" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
I have an textblock, expander and a textbox...
these are inside the header of a listview column.
TextBlock is for listview column name, on click of expander...textbox will be displayed...and user can seartch the listview based on that column. The textbox is collapsed by default.
My requirement is, when user click on the expander, textbox should be displayed to the user...and focus should be on the textbox.
With the below XAML, I am able to display the textbox on click of expander and set the focus(cursor) on my textbox. But that cursor is no blinking. I mean I have to again click on textbox to type something
Please help me to find out what the issue is...Any help would be appreciated.
<StackPanel>
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="ID"/>
<Expander x:Name="IdExp" DockPanel.Dock="Right" IsExpanded="False" ExpandDirection="Down" >
</Expander>
</DockPanel>
<TextBox x:Name="PropertyCCCIDSearch"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},
Path=DataContext.SearchCCGId.Value,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding ElementName=IdExp, Path=IsExpanded, Converter={x:Static local:Converters.BoolToVisibility}}" >
<TextBox.Style>
<Style>
<Style.Triggers> <DataTrigger Binding="{Binding ElementName=IdExp, Path=IsExpanded}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=PropertyCCCIDSearch}"/> </DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
Your code is working correctly this is what i tried
<Window.Resources>
<BooleanToVisibilityConverter x:Uid="BooleanToVisibilityConverter_1" x:Key="b2v" />
</Window.Resources>
<Grid>
<StackPanel>
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="ID"/>
<Expander x:Name="IdExp" DockPanel.Dock="Right" IsExpanded="False" ExpandDirection="Down" >
</Expander>
</DockPanel>
<TextBox x:Name="PropertyCCCIDSearch" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},
Path=DataContext.SearchCCGId.Value,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding ElementName=IdExp, Path=IsExpanded,
Converter={StaticResource b2v}}" >
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=IdExp, Path=IsExpanded}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=PropertyCCCIDSearch}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
</Grid>
</Window>
I have a data bound tab control:
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
This control is showing one tab per product, however I would like to make the tabs of discontinued products semi-transparent (i.e. set their opacity to 0.2). How can I change the opacity property of the tabitem when the item is being auto generated. I know I could use a style to change them all, but I only want to change those which are discontinued.
In ItemsContainerStyle for TabControl, create a DataTrigger where you bind to your property (e.g IsDiscontinued) and set the Opacity from there
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDiscontinued}" Value="True">
<Setter Property="Opacity" Value="0.2"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.ItemContainerStyle>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Update
If you want to make the Content of the discontinued tabs semi-transparent you can do the same thing, but in the DataTemplate
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.Resources>
<DataTemplate DataType="{x:Type local:Product}">
<Border Name="bg" BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding Name}"/>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsDiscontinued}" Value="True">
<Setter TargetName="bg" Property="Opacity" Value="0.2"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<!--...-->
</TabControl>