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
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>
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>
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>
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.
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>