Alternation Index with Data Triggers - xaml

I have a Listbox with an Alternation Index of 2 on it. I then have a style set up to provide styling on the different alternation indexes.
<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border x:Name="Bd" SnapsToDevicePixels="true">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<Rectangle x:Name="HoverRectangle"
Height="Auto"
SnapsToDevicePixels="True"
Stroke="{StaticResource Gold}"
StrokeDashCap="Square"
StrokeThickness="0" />
<Rectangle x:Name="KeyboardFocusRectangle"
Height="Auto"
SnapsToDevicePixels="True"
Stroke="{StaticResource BrightBlue}"
StrokeDashCap="Square"
StrokeThickness="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource LightGray}" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource VeryLightGray}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also want to change the background on the items if they happen in the future. I have a function IsFuture returning a boolean. I then got this code working in the data template to style the background.
<DataTemplate x:Key="MeetingListItemTemplate">
<Grid x:Name="grid">
<!-- Removed lots of stuff here-->
</Grid>
<DataTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsFuture}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="#0094d6" TargetName="grid"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I set up the MutliDataTrigger so I could have the condition for alternation index and then I would use a different blue for each alternation but I'm not sure how I can get alternation index from here. Any ideas?

<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsFuture}" Value="true" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(ItemsControl.AlternationIndex)}" Value="0"/>
</MultiDataTrigger.Conditions>
Try the TemplatedParent RelativeSource mode.

You should be able to use a RelativeSource binding to bind to the AlternationIndex property of the parent ItemsControl:
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsFuture}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}, Path=AlternationIndex}" Value="1"
</MultiDataTrigger.Conditions>

Related

xaml style a border brush inside RibbonMenuItem

Im trying to style a RibbonMenuItem target type. the items inside are checkmark with border and contents. When IsMouseOver i want the border brush to be black.
The problem is there's not a borderbrush on the menuitem trigger property, and also im assuming the IsHighLighted is sort of like IsMouseOver property, so i make a seperate border style, and bind it to the style under trigger. i even tried to set the Opacity to a 1 value, but nothing seems to work
this is my code, as you can tell, im trying to override the ribbonmenuitem style
<Style x:Key="BorderThicknessStyle"
TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type RibbonMenuItem}"
TargetType="{x:Type RibbonMenuItem}">
<Setter Property="HorizontalContentAlignment" Value="{Binding
Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType=
{x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding
Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType=
{x:Type ItemsControl}}}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Padding" Value="3,2,3,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RibbonMenuItem}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="True">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding
BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2">
<Grid>
<Grid.ColumnDefinitions>
<!--Icon or check mark column-->
<ColumnDefinition MinWidth="22"
Width="Auto"
SharedSizeGroup="MenuItemIconColumnGroup" />
<!--Header column-->
<ColumnDefinition Width="*"/>
<!--Submenu arrow column-->
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Border x:Name="PART_SideBarBorder"
BorderThickness="1"
Background="{DynamicResource
ThemeWindowBackgroundBrush}"
BorderBrush="{Binding RelativeSource=
{RelativeSource TemplatedParent},
Path=Ribbon.BorderBrush}"
MaxWidth="17"
MaxHeight="17">
<Grid x:Name="SideBarOverlay"
Background="{TemplateBinding
Background}">
<Image x:Name="Image"
Width="16"
Height="16"
Margin="4,3,6,1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Source="{TemplateBinding
ImageSource}" />
<Border x:Name="CheckMarkBorder"
BorderBrush="{TemplateBinding
BorderBrush}"
ClipToBounds="True">
<Path x:Name="CheckMark"
Visibility="Hidden"
Data="M 0 5 L 3 8 M 3 8 L 8 0"
Stretch="Uniform"
Stroke="{TemplateBinding
Foreground}"
StrokeEndLineCap="Round"
StrokeStartLineCap="Round"
Margin="2"
StrokeThickness="2" />
</Border>
</Grid>
</Border>
<ContentPresenter Grid.Column="1"
ContentSource="Header"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" />
<Path x:Name="Arrow"
Visibility="Collapsed"
Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Fill="{TemplateBinding Foreground}" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ImageSource" Value="{x:Null}">
<Setter TargetName="Image" Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsCheckable" Value="True">
<Setter TargetName="Arrow" Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckMark" Property="Visibility"
Value="Visible" />
<Setter TargetName="CheckMarkBorder"
Property="Visibility" Value="Visible" />
<Setter TargetName="Image" Property="Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="PART_SideBarBorder"
Property="Style" Value="
{StaticResource BorderThicknessStyle}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Image" Property="Opacity"
Value="0.5" />
<Setter TargetName="Arrow" Property="Opacity"
Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works for me. In the ControlTemplate.Triggers, you want to add the DataTrigger instead of Trigger.
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsHighlighted}"
Value="True">
<Setter TargetName="PART_SideBarBorder" Property="BorderBrush"
Value="Black"/>
</DataTrigger>

How can I use the same style on several TextBlock controls, but have each control using different bindings and triggers?

I'd like to have several TextBlocks generally looking the same, but each needs to react on another trigger and in another way. I've tried to use a common style (MyTextBlockStyle) and add triggers later. But I get allways error meesages like "the property 'style' has been declared twice" or simillar.
To explain what I mean, I've made an example with 3 TextBlocks. 2 of them are bound to each a different CheckBox, and each triggering a different property (displayed text vs. foreground color). A third TextBlock shall change its background color depending of the content of a TextbBox. How can I achieve something like this?
<UserControl.Resources>
<Style x:Key="MyTextBlockStyle" TargetType="TextBlock">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="5"/>
</Style>
</UserControl.Resources>
<Grid >
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Foreground="White" Margin="5" />
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Foreground="White" Margin="5" />
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..." Tooltip="Change Background of TextBlock 3"/>
<TextBlock Style="{StaticResource MyTextBlockStyle}" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Something different">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox02, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Style="{Static Resource MyTextBlockStyle}" Text="Anything else">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="Yellow" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TextBox03, Path=Text}" Value="">
<Setter Property="Background" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Grid >
Please try this code.It works.I guess as you wish
<Window.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox01,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb1"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Orange"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=CheckBox02,Path=IsChecked}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb2"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Pink"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=TextBox03,Path=Text}" Value=""/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="tb3"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Background" Value="Green"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<StackPanel Margin="10">
<CheckBox x:Name="CheckBox01" Content="Change Background of TextBlock 1" IsChecked="False" Margin="5"/>
<CheckBox x:Name="CheckBox02" Content="Change Background of TextBlock 2" IsChecked="False" Margin="5"/>
<TextBox x:Name="TextBox03" Padding="10" Background="White" Text="Enter Text here ..."/>
<TextBlock Tag="tb1"/>
<TextBlock Tag="tb2" Text="Something different"/>
<TextBlock Tag="tb3" x:Name="tb3" Text="Anything else"/>
</StackPanel>
</Grid >
You are looking for the BasedOn Property. It gets me all the time.
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="MyTextBlockStyle">
<Setter Property="Text" Value="No" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=CheckBox01, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>

How to Remove the Pivot Header but Keep Functionality

In a previous question How to Change Pivot Header Template in Windows Phone 8 I retemplated the Pivot Header, but I was wondering how it would be possible to remove the headers all together, while maintaining the functionality of a PivotControl.
Here's a solution that I use for the same purpose, it works fine:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<primitives:PivotHeadersControl x:Name="HeadersListElement" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle1}" ItemContainerStyle="{StaticResource PivotItemStyle1}">
<phone:Pivot.ItemTemplate>
<DataTemplate><!-- dummy content to show that no header is on the screen -->
<Border BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Background="Red" />
</Border>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<!-- we need empty header template to hide the pivotitem title completely -->
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
</phone:Pivot>

Add Xaml hyperlink to rectangle

I am trying to add a hyperlink to a xaml rectangle and it's not working. I tried adding hyperlink with a button and it works. How can I add hyperlink to a group of rectangle for the code below.
How to give Hyperlink for below Code
<Rectangle Fill="Red" HorizontalAlignment="Left" Height="38" Margin="1038,74,0,0" Stroke="Black" VerticalAlignment="Top" Width="426"/>
<TextBlock HorizontalAlignment="Left" Margin="1173,82,0,0" TextWrapping="Wrap" Text="Pending Sites " VerticalAlignment="Top" Height="24" Width="142" Foreground="#FFF7F6F1" FontSize="20" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-0.098"/>
</TextBlock.RenderTransform>
</TextBlock>
Code I tried with Button which is working fine
<Button Content="Click to go to desc page" Click="Button_Click_1" Margin="62,376,0,357"/>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(dPlanner2x.MyPageDetails));
}
Rather than trying to turn a Rectangle into a click-able object, you are much better off if you apply a Style to a Button.
An example of a Style to change the look of a Button is given below:
<Style x:Key="btnCommand" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="rct"
TextBlock.Foreground="White"
Background="DarkGray"
BorderBrush="DarkGray"
BorderThickness="1"
Cursor="Hand"
UseLayoutRounding="True"
SnapsToDevicePixels="True"
Margin="10"
Height="24"
MinWidth="75">
<ContentPresenter TextBlock.FontStyle="Segoe UI Semibold"
TextBlock.FontSize="14"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="LightGray" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="DarkGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="rct"
Property="TextBlock.Foreground"
Value="DarkGray" />
<Setter TargetName="rct"
Property="Background"
Value="White" />
<Setter TargetName="rct"
Property="BorderBrush"
Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Obviously, you will want something that looks completely different, but the Style template above can be easily modified to fit your needs.

How to change button background color depending on bound command canexecute?

I Have a ItemTemplate in which is a simple button bound on a command, which can be executable or not depending on some property.
I'd like the color of this button's background to change if the command isn't executable.
I tried several methods, but I can't find anyway to do this purely in XAML (I'm doing this in a study context, and code behind isn't allowed).
Here's my code for the button :
<Button x:Name="Dispo" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="30" Height="30"
Grid.Column="2" Grid.Row="0"
Command="{Binding AddEmpruntCommandModel.Command}"
CommandParameter="{Binding ElementName='flowCars', Path='SelectedItem'}"
vm:CreateCommandBinding.Command="{Binding AddEmpruntCommandModel}" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Button.Background" Value="Green"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Button.Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can specify your own template like that:
<Button Content="OK" Command="{Binding SomeCommand}">
<Button.Style>
<Style>
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>