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>
Related
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>
Below is my list view
<ListView Grid.Column="0" Grid.Row="2" BorderThickness="0" ItemTemplate="{StaticResource ListViewDataTemplate}" x:Name="NewTasks"
SelectedItem="{Binding SelectedTask}"/>
Data Template For my list view
<DataTemplate x:Key="ListViewDataTemplate">
<StackPanel Style="{StaticResource ListViewStackPanel}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Name="UserActions">
<Image Source="\Images\Edit.png" Height="30" Width="30" cal:Message.Attach="[Event MouseUp] = [Action EditTask]"/>
<Image Source="\Images\Delete.png" Height="15" Width="15" cal:Message.Attach="[Event MouseUp] = [Action DeleteTask]"/>
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="5" FontSize="20" FontWeight="SemiBold"/>
<TextBlock Text="{Binding Description}" Margin="5" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
Trigger for my stack panel in list view
<Style TargetType="StackPanel" x:Key="ListViewStackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding Priority}" Value="Low">
<Setter Property="Background" Value="#cccedb" />
<Setter Property="TextBlock.Foreground" Value="#083045"/>
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="Medium">
<Setter Property="Background" Value="#fbbf79" />
<Setter Property="TextBlock.Foreground" Value="#373c3e"/>
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="High">
<Setter Property="Background" Value="#cd5849" />
<Setter Property="TextBlock.Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
When mouse is hovered on an item in list view the i want to show user actions for that item.
Addd Trigger to your DataTemplate to achieve your requirements.
<DataTemplate x:Key="ListViewDataTemplate">
<StackPanel Style="{StaticResource ListViewStackPanel}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Name="UserActions" Visibility="Collapsed">
<Image Source="\Images\Edit.png" Height="30" Width="30" cal:Message.Attach="[Event MouseUp] = [Action EditTask]"/>
<Image Source="\Images\Delete.png" Height="15" Width="15" cal:Message.Attach="[Event MouseUp] = [Action DeleteTask]"/>
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="5" FontSize="20" FontWeight="SemiBold"/>
<TextBlock Text="{Binding Description}" Margin="5" TextWrapping="Wrap"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="UserActions" Property="Visibility" Value="Visible" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
My Code
<Window x:Class="WpfApp1.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"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="600">
<Window.Resources>
<Style TargetType="StackPanel" x:Key="ListViewStackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding Priority}" Value="Low">
<Setter Property="Background" Value="#cccedb" />
<Setter Property="TextBlock.Foreground" Value="#083045"/>
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="Medium">
<Setter Property="Background" Value="#fbbf79" />
<Setter Property="TextBlock.Foreground" Value="#373c3e"/>
</DataTrigger>
<DataTrigger Binding="{Binding Priority}" Value="High">
<Setter Property="Background" Value="#cd5849" />
<Setter Property="TextBlock.Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="ListViewDataTemplate">
<StackPanel Style="{StaticResource ListViewStackPanel}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Name="UserActions" Visibility="Collapsed">
<Image Source="\Images\Edit.png" Height="30" Width="30" />
<Image Source="\Images\Delete.png" Height="15" Width="15" />
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="5" FontSize="20" FontWeight="SemiBold"/>
<TextBlock Text="{Binding Description}" Margin="5" TextWrapping="Wrap"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="UserActions" Property="Visibility" Value="Visible" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<ListView Grid.Column="0" Grid.Row="2" BorderThickness="0" ItemTemplate="{StaticResource ListViewDataTemplate}" x:Name="NewTasks"
SelectedItem="{Binding SelectedTask}"/>
</Window>
I have a list of lvAccessPoints which has 3 properties,
1)name
2)password
3)isSecured
i a texbox and button in each item, which i am currently showing when an item is selected.
so now when i select one item text box and button will come up.
But i also want to check the property isSecured for showing textbox
condition is
textbox=> visible: if item is selected and has isSecured property true
hidden:if isSecured is false (irrespective of selected or not)
<ListView Margin="0" Name="lvAccessPoints" Background="#ff1d1d1d" Grid.Row="1" BorderThickness="0">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<!--<iconPacks:PackIconModern Kind="ConnectionWifi" Foreground="White" Width="30" Height="30"/>-->
<TextBlock Text="{Binding Points.Name}" FontWeight="Bold" Foreground="White" Padding="10,0" FontSize="15" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
<TextBox HorizontalAlignment="Left"
x:Name="txt"
TextWrapping="Wrap"
Text="{Binding Password}"
VerticalAlignment="Center"
Width="200"
Height="28"
Visibility="Collapsed" />
<Button x:Name="btn" Grid.Column="1" Visibility="Collapsed" Width="100" Margin="10" HorizontalAlignment="Left" Background="#FF2d89ef" Foreground="White" Padding="5" VerticalAlignment="Center" Grid.Row="2" Click="Button_Click_1">
<TextBlock Text="Connect" />
</Button>
</StackPanel>
</WrapPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True">
<Setter TargetName="txt" Property="Visibility" Value="Visible" />
<Setter TargetName="btn" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
To show the text box i need to check 2 properties one is isSecured, and another is isSelectd.
How can i change my code?
Use a MultiDataTrigger:
<DataTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="True" />
<Condition Binding="{Binding Path=points.isSecured}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="txt" Property="Visibility" Value="Visible" />
<Setter TargetName="btn" Property="Visibility" Value="Visible" />
</MultiDataTrigger>
</DataTemplate.Triggers>
In the code below if I change
<Style TargetType="{x:Type Border}">
To
<Style TargetType="{x:Type ListBoxItem}">
It will color my entire listboxitem the correct color. But I only want to hit the border background
<ListBox x:Name="FilteredMessagesListBox" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch" SelectionMode="Extended" Background="Transparent" AlternationCount="2">
<ListBox.Resources>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightBlue"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGreen"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate >
<DataTemplate>
<DockPanel Margin="0,0,0,3">
<Button x:Name="AttachmentImageButton" Click="AttachmentImageButton_Click" DockPanel.Dock="Bottom" MaxWidth="200" MaxHeight="200" HorizontalContentAlignment="Center" Visibility="{Binding ElementName=AttachmentImageButton, Converter={StaticResource cImageAttachmentToVisible}}" >
<Image Source="{Binding Path=Attachment}" x:Name="AttachmentImage" />
</Button>
<Button x:Name="AttachmentButton" Click="AttachmentButton_Click" DockPanel.Dock="Right" Visibility="{Binding ElementName=AttachmentButton, Converter={StaticResource cAttachmentToVisible}}" >
<Image Source="/MobilWPF;component/Resources/Images/PaperClip/PaperClip.jpg" Width="20" Height="20"/>
</Button>
<TextBlock Text="{Binding Converter={StaticResource cGetInstantMessageHeader}}" Width="120" TextWrapping="Wrap" HorizontalAlignment="Left" Background="Transparent" FontSize="10" DockPanel.Dock="Left"/>
<Border DockPanel.Dock="Left" HorizontalAlignment="Stretch" CornerRadius="5">
<DockPanel>
<TextBlock Margin="5,0,0,0" Text="{Binding Path=Message}" TextWrapping="Wrap" DockPanel.Dock="Left" HorizontalAlignment="Left" Background="Transparent" FontSize="12"/>
</DockPanel>
</Border>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried this:
<Border DockPanel.Dock="Left" HorizontalAlignment="Stretch" CornerRadius="5">
<Border.Triggers>
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="0">
<Setter Property="Background" Value="LightBlue"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="1">
<Setter Property="Background" Value="LightGreen"/>
</DataTrigger>
</Border.Triggers>
<DockPanel>
<TextBlock Margin="5,0,0,0" Text="{Binding Path=Message}" TextWrapping="Wrap" DockPanel.Dock="Left" HorizontalAlignment="Left" Background="Transparent" FontSize="12"/>
</DockPanel>
</Border>
Cannot find the static member 'BackgroundProperty' on the type 'ContentPresenter'
The problem is that AlternationIndex is set on the containers (ListBoxItems in this case), not on some child within them. You could solve this by using DataTriggers that bind to AlternationIndex on the parent ListBoxItem instead:
<DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="0">
<Setter Property="Background" Value="LightBlue"/>
</DataTrigger>
I've got the following..
<ComboBox Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" ItemsSource="{Binding ShipperAddresses}" Text="{Binding ShipperAddress}" Margin="85,2,0,2">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBox AcceptsReturn="True" Width="200" Height="100"/>
<DataTemplate.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="IsReadOnly" Value="True">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}, Path=Tag}" Value="False"/>
</Style.Triggers>
</Setter>
</Style>
</DataTemplate.Resources>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The problem is that you can't apply a Style.Trigger like I'm trying to do inside a DataTemplate. So my question is how would you apply create a trigger so that a property on the DataTemplate changes based on the parent?
FINAL SOLUTION:
I took what Souvik gave me and fixed it up since there were a few problems. Here is the end result.
<ComboBox Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" ItemsSource="{Binding ShipperAddresses}" Text="{Binding ShipperAddress}" DisplayMemberPath="Value" Margin="85,2,0,2">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBox AcceptsReturn="True" Width="200" Height="100" Text="{Binding Path=Value}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=IsEditable}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.Resources>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="IsEditable" Value="True"/>
<Style.Triggers>
<Trigger Property="IsDropDownOpen" Value="True" >
<Setter Property="IsEditable" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Resources>
Have DataTemplate trigger instead of Style trigger:
<ComboBox Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" ItemsSource="{Binding ShipperAddresses}" Text="{Binding ShipperAddress}" Margin="85,2,0,2">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBox AcceptsReturn="True" Width="200" Height="100"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}, Path=Tag}" Value="False">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>