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>
Related
I can do the watermark text/placeholder on a WPF textbox control by using the below XAML code.
<TextBox Name="txtFilter" Grid.Row="1" Height="25" Width="250" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Margin="5,0,0,0" TextChanged="txtFilter_TextChanged">
<TextBox.Style>
<Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="White" CornerRadius="5" BorderBrush="Black" BorderThickness="1">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="textBlock" VerticalAlignment="Center" Opacity="0.5" Text=" Search by Customer Name " Foreground="Blue" FontStyle="Italic" Visibility="Hidden" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False" />
<Condition Property="Text" Value="" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="textBlock" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
But how it is possible for a WPF Combo box control ? I tried with the below shown XAML code. But it is not working.
<ComboBox.Resources>
<VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="0.4" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<TextBlock FontStyle="Italic" Opacity="0.5" Text="Type or select from list" Foreground="Blue" Visibility="Visible"/>
</VisualBrush.Visual>
</VisualBrush>
</ComboBox.Resources>
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
Can anyone help me to place a watermark text on a WPF Combobox control ???
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>
I have TabControl:
<TabControl x:Name="tabControl" BorderThickness="0" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1" Margin="0,5,0,0">
<TabControl.Resources>
<Style TargetType="local:ucTabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ucTabItem">
<Grid Name="Panel" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="1,2"/>
<Grid.Background>
<ImageBrush ImageSource="/Images/Sudanese_Police.png" AlignmentX="Center" AlignmentY="Center" Stretch="None" />
</Grid.Background>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="{StaticResource brushTabHeaderActive}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="{StaticResource brushTabHeaderHover}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
How can I set the background image that will shown when all tabs is closed I try to use
<TabControl.Background>
<ImageBrush ImageSource="/Images/BGI.png" AlignmentX="Center" AlignmentY="Center" Stretch="None" />
</TabControl.Background>
But then I dont see background color...
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.
I have wpf Expander control and I want change background color of Header when I do mouse over on it.
Here is my control:
<Expander Margin="0" ExpandDirection="Right">
<Expander.Header>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image Source="placeholder_imageObject.png" Stretch="Uniform" Margin="6,0,0,0" Width="36" Height="36" VerticalAlignment="Center"/>
<ContentPresenter Content="Image" VerticalAlignment="Center" Margin="5,0,0,0"/>
<Path Data="{StaticResource RightArrowGeometry}" Fill="Black" Margin="14,0,0,0" VerticalAlignment="Center">
</Path>
</StackPanel>
</Expander.Header>
<Grid Margin="10,0,0,0" Background="White">
<controls:SymbolController x:Name="dgSymbolControl">
</controls:SymbolController>
</Grid>
</Expander>
Pls Help
thanks
Sai
U can give your StackPanel within in your "Expander.Header" an Style with Trigger like this:
<Style x:Key="MyCustomStackPanelStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>