I have defined a style for a control so that it's content is a combonation of different controls.
<Style x:Key="TagSetting" TargetType="CheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<CheckBox x:Name="chkTag" Focusable="False"/>
<ComboBox x:Name="cbbTagAction" Width="65" Margin="0,0,5,0">
<ComboBoxItem Content="Clear"/>
<ComboBoxItem Content="Tag"/>
</ComboBox>
<TextBlock x:Name="lblTag" Text="{TemplateBinding Content}" VerticalAlignment="Center"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger SourceName="chkTag" Property="IsChecked" Value="True">
<Setter TargetName="cbbTagAction" Property="IsEnabled" Value="True"/>
<Setter TargetName="cbbTagAction" Property="SelectedIndex" Value="1"/>
<Setter TargetName="lblTag" Property="IsEnabled" Value="True"/>
</Trigger>
<Trigger SourceName="chkTag" Property="IsChecked" Value="False">
<Setter TargetName="cbbTagAction" Property="IsEnabled" Value="False"/>
<Setter TargetName="cbbTagAction" Property="SelectedIndex" Value="-1"/>
<Setter TargetName="lblTag" Property="IsEnabled" Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I need to access the ComboBox cbbTagAction in code so I can set the selected index. I have many of these CheckBoxes.
<CheckBox x:Name="chkAlbum" Style="{StaticResource TagSetting}" Content="album"/>
<CheckBox x:Name="chkAlbumArtists" Style="{StaticResource TagSetting}" Content="album artists"/>
<CheckBox x:Name="chkArtists" Style="{StaticResource TagSetting}" Content="artists"/>
<CheckBox x:Name="chkArtwork" Style="{StaticResource TagSetting}" Content="artwork"/>
<!-- It goes on... --->
How can I access the ComboBox for each of these CheckBoxes so I can set the selected index in C# code (not XAML)?
Related
I have a Listbox with Image, TextBox, TextBlock bound to a ObservableCollection.
What I want to achieve is that those ListboxItems can be edited by the user just like Windows Explorer Style.
Select ListboxItem - MouseClick once - ENABLE Textbox. I got a MultiDatatrigger that works for the isEnabled Property. But I don't want it to trigger on the first click on the items. User first needs to select one and then click again.
<ListBox x:Name="Listbox1" Margin="0,12,0,5" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image x:Name="ListBoxImage" Source="{Binding FileIcon}" Height="30" Width="30"/>
<StackPanel VerticalAlignment="Center" Orientation="Vertical" Width="150">
<TextBox BorderThickness="0" FontSize="11" IsEnabled="False" x:Name="ListBoxFileName" TextWrapping="Wrap" Text="{Binding FileName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="7,0,0,0">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ScrollViewer Name="PART_ContentHost" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Value="{StaticResource DisabledBackgroundBrush}" Property="Background" />
<Setter Value="{StaticResource DisabledForegroundBrush}" Property="Foreground" />
<Setter TargetName="PART_ContentHost" Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter Value="{StaticResource DisabledBackgroundBrush}" Property="Background" />
<Setter Value="{StaticResource DisabledForegroundBrush}" Property="Foreground" />
<Setter TargetName="PART_ContentHost" Property="Background" Value="White"/>
<Setter Property="Height" Value="25"></Setter>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Value="False" Property="IsEnabled" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
<StackPanel VerticalAlignment="Center" Orientation="Vertical" Width="70">
<TextBlock x:Name="ListBoxFileCreation" FontSize="11" TextWrapping="Wrap" Text="{Binding FileCreation, StringFormat='dd.MM.yyyy'}" Margin="10,0,5,0" />
</StackPanel>
</StackPanel>
<DataTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsClicked}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="ListBoxFileName" Property="IsEnabled" Value="true"/>
</MultiDataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="3,5,3,5"/>
<!--<EventSetter Event="MouseDown" Handler="ListBoxItem_MouseDown"/>-->
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
This is what I have so far. Thank you in advance.
I've searched for how to float the modern-tab (layout-ed as list) links to the left for my project, unfortunately no result found :/
please guys any idea ?
The horizontal alignment is hard-coded to right. You would need to replace the control template:
<ControlTemplate TargetType="controls:ModernTab">
<Grid>
<!-- link list -->
<ListBox x:Name="LinkList" ItemsSource="{TemplateBinding Links}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="{DynamicResource HeaderMargin}"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.CanContentScroll="False"
ScrollViewer.PanningMode="Both">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="{DynamicResource MenuText}" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
<Setter Property="Foreground" Value="{DynamicResource MenuText}" />
<Setter Property="Margin" Value="12,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter x:Name="Presenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- content -->
<controls:ModernFrame Source="{Binding SelectedSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}" />
</Grid>
</ControlTemplate>
I know this is an old question but I can't seem to find anywhere else that gives another answer other than changing the control template. Setting the horizontal alignment did it for me:
<mui:ModernTab Layout="Tab" HorizontalAlignment="Left">
<mui:ModernTab.Links>
<!-- TODO: set #Source -->
<mui:Link DisplayName="Connect" Source="/Pages/Tab1.xaml" />
<mui:Link DisplayName="Diagnostics" Source="/Pages/Tab2.xaml" />
</mui:ModernTab.Links>
</mui:ModernTab>
I have a style defined in my resource dictionary so the style can be used in all over my application.
<Style x:Key="HyperlinkStyle" TargetType="{x:Type Hyperlink}">
<Setter Property="Foreground" Value="{StaticResource Color3}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource Color3Pressed}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource Color2NotEnabled}" />
</Trigger>
</Style.Triggers>
</Style>
I use the style in Datagrid like this :
<DataGridTemplateColumn Width="140*" CanUserReorder="False" CanUserResize="True" Header="">
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate />
</DataGridTemplateColumn.CellEditingTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="DataGridCell" BasedOn="{StaticResource DatagridCellHyperlinkStyle}">
<Setter Property="IsEnabled" Value="{Binding Path=MyObject, Converter={StaticResource ConverterMyObject}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Padding="{TemplateBinding Padding}" VerticalAlignment="Center">
<TextBlock Width="Auto" Height="Auto" TextTrimming="CharacterEllipsis">
<Hyperlink IsEnabled="{TemplateBinding IsEnabled}">
<InlineUIContainer TextDecorations="{Binding Path=TextDecorations, RelativeSource={RelativeSource AncestorType=TextBlock}}" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType=TextBlock}}">
<ContentPresenter Width="Auto" Height="Auto" Content="{Binding DataContext.MyObject.Name, RelativeSource={RelativeSource AncestorType=DataGridRow}}"/>
</InlineUIContainer>
<Hyperlink.Style>
<Style TargetType="Hyperlink" BasedOn="{StaticResource HyperlinkStyle}">
<EventSetter Event="Hyperlink.Click" Handler="Clic" />
</Style>
</Hyperlink.Style>
</Hyperlink>
</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
This works great but I would like to be able to have 2 colors in my style depending on a parameter.
For example, my datagrid has 1500 rows, I want to highlight 100 rows from the collection by changing their hyperlink color.
So I thought the best was to set the Tag property of the hyperlink to a custom value and use it in the style. Following this answer : https://social.msdn.microsoft.com/Forums/vstudio/en-US/d3424267-ed1f-4b30-90a1-5cca9843bd22/problem-making-a-trigger-on-the-tag-property?forum=wpf, I made the changes below :
xmlns:sys="clr-namespace:System;assembly=mscorlib"
First I've set the tag manually for each row to see if the style changes :
<Hyperlink IsEnabled="{TemplateBinding IsEnabled}" Tag="10">
and added this trigger to my hyperlink's style:
<Trigger Property="Tag">
<Trigger.Value>
<sys:Byte>10</sys:Byte> <!-- My highlighted object -->
</Trigger.Value>
<Setter Property="Foreground" Value="{StaticResource Color1}" />
</Trigger>
But it doesn't work when I launch my application (I still have "Color3" whereas I want "Color1" when Tag is equals to 10.
I've checked the output there isn't any error.
I've tried to change "sys:Byte" by "sys:String" but the result was the same.
Do I need to change my approach for this problem ? I've read maybe we can't add trigger on Tag Property.
Thank you
I suggest if you set the tag like this
<Hyperlink IsEnabled="{TemplateBinding IsEnabled}" Tag="10">
Then write the trigger in the same way:
<Trigger Property="Tag" Value="10">
...setter
</Trigger>
Or if in hyperlink you use Byte type as Tag:
<Hyperlink IsEnabled="{TemplateBinding IsEnabled}">
<Hyperlink.Tag>
<sys:Byte>10</sys:Byte>
</Hyperlink.Tag>
</Hyperlink>
Then same goes in the trigger:
<Trigger Property="Tag">
<Trigger.Value>
<sys:Byte>10</sys:Byte>
</Trigger.Value>
...setter
</Trigger>
I am trying to create a WPF ToggleButton with a TextBox and a CheckBox as it's control template.
Here is what I have so far:
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="toggleButtonTextBlock"
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
<CheckBox x:Name="toggleButtonCheckBox" VerticalAlignment="Center" Margin="2"
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
</CheckBox>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
<Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="True"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="False">
<Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
<Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="{x:Null}">
<Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
<Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I click the Text of the ToggleButton, the text is properly underlined and the CheckBox is checked. But if I click the CheckBox, the text is not properly underlined (and the ToggleButton is not changed to IsChecked=True).
How do I get the ToggleButton to be IsChecked=True (and having the text underlined) when clicking the CheckBox?
It should be simple I guess, but being fairly inexperienced at XAML, this seems beyond my comprehension.
Thanks for your Help
You can simplify your triggers. In WPF, if the trigger evaluates to false then the target element/property will return to its previous state. Your binding on toggleButtonCheckBox is sufficient to set the IsChecked property on the ToggleButton; you don't need to set it in the trigger.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="toggleButtonTextBlock"
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
<CheckBox x:Name="toggleButtonCheckBox"
VerticalAlignment="Center"
Margin="2"
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
</CheckBox>
</StackPanel>
<ControlTemplate.Triggers>
<!-- Will return to previous state if false -->
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="toggleButtonTextBlock"
Property="TextDecorations"
Value="Underline"/>
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Setter TargetName="toggleButtonTextBlock"
Property="TextDecorations"
Value="Underline"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
I have an issue with the IsMouveOver trigger with a TabItem Element.
When the mouse cursor is on a TabItem, its background color changes, which is what I want => It works.
However the background color of the TabItem also changes whenever my mouse cursor is on an item inside the TabItem.
Here's the XAML related to the styling:
<Style x:Key="SupTest" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent"
BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center"
HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
<Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="DarkGray" />
</Trigger>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the XAML code for the windows itself:
<TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TabStripPlacement="Left"
BorderThickness="1,0,0,0" BorderBrush="{DynamicResource WindowTitleColorBrush}">
<TabItem Header="Item #1" Style="{StaticResource SupTest}">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
</Grid>
<TabItem Header="Item #2" Style="{StaticResource SupTest}">
<Grid>
<Button Content="Button Teeest" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75"/>
</Grid>
</TabItem>
</TabControl>
With this code for example, the IsMouseOver of a TabItem is triggered when the mouse cursor is on the button it contains.
How to fix this? :P
Thanks for the help =)
It does not work because Border as container takes all events, and MouseOver is not exception. If you want to ignore MouseOver event for some part (your inner part of the item) then just put inner item on top of wider item.
You can add Grid control beneath inner part and bind Trigger to its MouseOver event.
<Border Margin="2" Name="TabBorder" CornerRadius="6" BorderBrush="Transparent" Background="Transparent"
BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid>
<Grid x:Name="gridMouseOver"/>
<StackPanel Margin="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Width="25" Height="25" Fill="Blue" HorizontalAlignment="Left" Margin="00,0,0,0"></Rectangle>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center"
HorizontalAlignment="Stretch" Margin="10,0,0,0"></ContentPresenter>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="TabBorder" Property="Background" Value="#FFDFDFDF" />
<Setter TargetName="TabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TabBorder" Property="Background" Value="DarkRed" />
<Setter TargetName="TabBorder" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="DarkGray" />
</Trigger>
<Trigger SourceName="gridMouseOver" Property="IsMouseOver" Value="True">
<Setter TargetName="TabBorder" Property="Background" Value="{DynamicResource WindowTitleColorBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
bit of an old question but this has been troubling me all day....
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
</MultiDataTrigger.Conditions>
This solved it for me
ignores the mouse over for the active tab
Hope this helps any one who has this problem