I want to change control properties inside the template control. For example foreground . But when I change that noting happened. I set foreground to Aqua in the bellow code and after setting IsEnabled to false nothing happened (just opacity changed)
<CheckBox Name="chbx" Content="Check Box" Foreground="White"
HorizontalAlignment="Center" IsEnabled="False" >
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<BulletDecorator>
<BulletDecorator.Bullet>
<Border Width="15" Height="15" x:Name="border"
Background="Transparent" BorderBrush="LightGray"
BorderThickness="1" ClipToBounds="True">
<Border.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="2"></DropShadowEffect>
</Border.Effect>
<Path x:Name="CheckMark"
Width="8"
Height="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 8 8 M 0 8 L 8 0"
Stretch="Fill"
Stroke="LightGray"
StrokeEndLineCap="Round"
StrokeStartLineCap="Round"
StrokeThickness="2"
/>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="04,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
RecognizesAccessKey="True"
/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="White"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
<Setter Property="Foreground" Value="Aqua"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
Related
I've managed to create a ListboxItemTemplate with a Path and a Textblock. I've set the styles for the Path so that when the mouse is over it will change colours. My XAML below is:
<DataTemplate x:Key="WorkingFileTemplate">
<Grid HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" Height="Auto" ToolTip="{Binding Path}" HorizontalAlignment="Left">
<Path x:Name="ButtonPath" Stroke="#FFEA3E3E" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Stretch="Uniform" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,5.75,0,4.625" StrokeThickness="2.55" Width="11.25" Height="Auto" Data="M0,0 L25,25 M0,25 L25,0">
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" Value="White" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Stroke" Value="#FFEA3E3E" />
</Trigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<TextBlock Text="{Binding Name}" TextTrimming="CharacterEllipsis" Margin="5,2,0,0" TextOptions.TextFormattingMode="Display" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontSize="13.333" Foreground="#FFC9C9C9"/>
</StackPanel>
</Grid>
</DataTemplate>
Why doesn't it work when I hover over the mouse? It stimple doesn't get activated.
You may need to use a ControlTemplate.Trigger. Here, I added a button and have a ControlTemplate.
<Button>
<Button.Template>
<ControlTemplate>
<Path x:Name="ButtonPath" Stroke="#FFEA3E3E" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Stretch="Uniform" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,5.75,0,4.625" StrokeThickness="2.55" Width="11.25" Height="Auto" Data="M0,0 L25,25 M0,25 L25,0">
</Path>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonPath" Property="Stroke" Value="Blue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="ButtonPath" Property="Stroke" Value="#FFEA3E3E" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I have a menu.
Here is the xaml for creating this menu :
<Menu Grid.Column="0" ItemsSource="{Binding ParentButtons}" >
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<!--<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>-->
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Menu.Resources>
<Menu.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type model:Design_Master_Buttons}"
ItemsSource="{Binding Design_Master_Buttons1}">
<StackPanel Orientation="Horizontal">
<Path Data="{Binding ImageData}"
Stretch="Uniform" Width="32" Height="32" Margin="5" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
<Path.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="#FFFFFFFF" />
<Style.Triggers>
<Trigger Property="MenuItem.IsMouseOver" Value="True">
<Setter Property="Fill" Value="{Binding MouseOverColor}" />
</Trigger>
</Style.Triggers>
</Style>
</Path.Resources>
</Path>
<TextBlock Text="{Binding Title}" VerticalAlignment="Center">
<TextBlock.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="Margin" Value="10,0,0,0" />
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Margin" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Resources>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
But I have got 1 problem:
When I mouseOver Path (It's working good):
When I mouseOver MenuItem (It's not working as expected) :
Try this : In my case stackpanel as AncestorType is not worked so i used Menuitem.
<StackPanel>
<Path x:Name="PathData" Data="M 0 0 L 0 5 L 5 5 Z" Stretch="Uniform" Width="32" Height="32" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0"/>
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
<Path.Style>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="Transparent" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type MenuItem}},Path=IsMouseOver}" Value="True">
<Setter Property="Fill" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</StackPanel>
Your Path resource is not correct replace it by :
<Path.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="#FFFFFFFF" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=StackPanel,AncestorLevel=1}, Path=IsMouseOver}" Value="True" >
<Setter Property="Fill" Value="{Binding MouseOverColor}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Resources>
And add Background="#01000000" to the StackPanel, it will be able to detect IsMouseOver property.
And now it will works.
Regards.
I'm brand new to wpf. I have a window with multiple sliders and I want to display the value of the slider adjacent to the thumb how AutoToolTipPlacement behaves, except that I want it to always be visible.
I've tried a few different approaches to this but none are working out quite right.
Solution
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" VerticalAlignment="Center" Width="11">
<Thumb.Template>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
<Path x:Name="grip" Data="M0,0C0,0 11,0 11,0 11,0 11,18 11,18 11,18 0,18 0,18 0,18 0,0 0,0z" Fill="#FFF0F0F0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="#FFACACAC" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
<TextBox HorizontalAlignment="Left" Height="18" Margin="-12,-23,-13,0" TextWrapping="Wrap" Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}" VerticalAlignment="Top" Width="36" TextAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="grip" Value="#FFDCECFC"/>
<Setter Property="Stroke" TargetName="grip" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter Property="Fill" TargetName="grip" Value="#FFDAECFC"/>
<Setter Property="Stroke" TargetName="grip" Value="#FF569DE5"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" TargetName="grip" Value="#FFF0F0F0"/>
<Setter Property="Stroke" TargetName="grip" Value="#FFD9D9D9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
You can create your own template for that. Here is a more general article on slider templates in WPF: http://msdn.microsoft.com/en-us/library/ms753256.aspx. Also, here you can find a more specific example: http://www.codeproject.com/Articles/18270/A-Guided-Tour-of-WPF-Part-3-Data-binding.
This question already has answers here:
WPF ComboBox without drop-down button
(3 answers)
Closed 3 years ago.
I am creating an WPF application, in that I need to Hide the ComboBox's Arrow symbol. Please help me any body.
If you want to do that, you need to Restyle the ComboBox, as DHN says. This is the one I used:
<!-- ComboBox style -->
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{DynamicResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{Binding Text}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
Foreground="DarkBlue"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="{DynamicResource TextBoxBrush}"
BorderThickness="1"
BorderBrush="{DynamicResource SolidBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#373737"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
If you see in this code, you have a ToggleButton. This one is the one that defines your arrow. Here you have the ToggleButton style:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="5"
Background="{DynamicResource DarkGradient}"
BorderBrush="{DynamicResource SolidBorderBrush}"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="5,0,0,5"
Margin="1"
Background="{DynamicResource TextBoxBrush}"
BorderBrush="{DynamicResource SolidBorderBrush}"
BorderThickness="0,0,1,0" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{DynamicResource TextBoxBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter Property="Foreground" Value="DarkBlue"/>
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you erase this line:
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{DynamicResource TextBoxBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
And also comment:
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
on the ToggleButton you erase your arrow :)
NOTE: If you want to use this code exactly, you need to create your own Fill colors.
I am trying to draw a tick in a checkbox and for reason the aliasing doesn't seem to work, the lines are really jagged and don't look good at all. I am missing somthing?
<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<BulletDecorator Height="20" MinHeight="20">
<BulletDecorator.Bullet>
<Grid
Width="20"
Height="20">
<Border x:Name="Border"
CornerRadius="0"
Background="Black"
BorderThickness="0"
BorderBrush="Black"
Width="20"
Height="20" >
<Path
x:Name="CheckMark"
Stroke="White"
StrokeThickness="8"
Data="M 3,8 L 5,17,17,2"/>
</Border>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="0,0,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
RecognizesAccessKey="True" RenderOptions.EdgeMode="Aliased"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Managed to fix this by setting the render options to unspecified.