WPF Flat Repeat Button (ToolBar look) - wpf

I'm trying to give the RepeatButton the flat look w/o overriding the ControlTemplate. With the regular Button you can do the following (but not with the RepeatButton):
<Button BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">...
Is there something similar for the RepeatButton or for ButtonBase? I'm assuming no because if you put a RepeatButton in a ToolBar is does not get a flat look.
Is there a better way to give the RepeatButton a flat look other than overriding the ControlTemplate?

Here's what came up with for a flat RepeatButton Style with a Path as content:
<Style x:Key="RepeatButtonFlat" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" Height="14" Width="14">
<Path HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Margin="2"
Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sample usage:
<RepeatButton Style="{StaticResource ScrollBarLineButton}" Content="M0,0 L1,0 .5,-.5 Z"/>

Related

In Wpf how to avoid/disable mouse hover a button highlight color?

I wonder if there is a way to do it for all the future buttons and other controls or do i need to make a solution for each control/button ? And how to do it ?
I want to disable the mouse hove highlight.
<Button x:Name="btnTest" Content="Start Watching" HorizontalAlignment="Left" Margin="14,241,0,0" VerticalAlignment="Top" Width="109" RenderTransformOrigin="0.484,-0.066" Height="30" FontSize="16" Background="#FFFB0000" Click="btnTest_Click"/>
<TextBox HorizontalAlignment="Left" Height="30" Margin="14,175,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="644"/>
<Button Content="Browse" Margin="673,175,18,0" VerticalAlignment="Top" RenderTransformOrigin="-0.111,0.769" Height="30" FontSize="16"/>
Add it to your ResourceDictionary:
<Style TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And since Style has no key it will be on all the buttons
You'll need to create a style. if you want it to be applied through your whole app, you'll need to put it into your "app.xaml" file (within an application.Resources).
Bellow is an example of how to do it. I added some stuff like setters to illustrate that you can add properties, you could also add triggers and many things.
Not setting a "x:key" to your style will make them the default one (thus overriding the basic one), as the one below, if you wish to have a collection of styles, give them keys.
`<Style TargetType="{x:Type Button}">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Cursor"
Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>`

ToolTip style Template Text not working

I'm trying to change the text color of ToolTips through a style template. But changing the ToolTip Foreground property doesn't change the color no matter what I do. I'm almost certain this is because I also have a TextBlock style that's overriding it.
When attempting to retemplate with a new textblock, it has no effect at all. I've spent all day yesterday fiddling with this issue and searching through threads and have found nothing.. Any contribution would be appreciated.
This is the style in my resource dictionary:
<!-- TextBlock -->
<Style TargetType="{x:Type TextBlock}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#B2FFFFFF"/> <!-- ToolTip text color overridden by this -->
</Style>
<!-- ToolTip -->
<Style TargetType="{x:Type ToolTip}" BasedOn="{StaticResource {x:Type ToolTip}}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Foreground" Value="DarkBlue"/> <!-- has no effect -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Border Name="Border"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
MinWidth="100"
MinHeight="30"
Margin="0,0,0,50"
Background="Beige"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="10"/>
<TextBlock Foreground="DarkBlue"/> <!-- has not effect -->
<ContentPresenter Margin="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I figured out one solution to this issue.
Removing the TargetType from this line:
<ControlTemplate TargetType="ToolTip">
to read as so:
<ControlTemplate >
and further down in the ControlTemplate, the textblock should be set like this:
<TextBlock
Text="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}">
</TextBlock>
This allows the text color of a tooltip to be set with the ToolTip's "Foreground" property and is not overridden by other TextBlock styles.

Vertical Progress Bar Wpf

I'm trying to implement a vertical progress bar in WPF and am having some difficulty. I'm following Greg D's answer from Vertical progress bar template .net but it's not working for me. I have tried both using a external style and inline and no luck. It's annoying as it seems a relatively simple answer.
Here's my XAML;
<ProgressBar Name="VolumeMeter" Orientation="Vertical" Margin="4,30,0,0"
Value="50" HorizontalAlignment="Left" VerticalAlignment="Top" Height="300" Width="10">
<ProgressBar.Template>
<ControlTemplate>
<Border BorderBrush="Green" x:Name="Root" BorderThickness="1">
<Grid Name="PART_Track" Background="Red">
<Rectangle Name="PART_Indicator" Fill="Blue"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">//Error Here
<!-- Rotate the progressbar so the left edge is the bottom edge -->
<Setter TargetName="Root" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="Root" Property="Width"
Value="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Height}"/>
<Setter TargetName="Root" Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Width}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
The error I'm getting is on the <Trigger Property="Orientation" Value="Vertical"> line, I'm getting;
Cannot find the Template Property 'Orientation' on the type 'System.Windows.Controls.Control'.
Set the TargetType of the ControlTemplate.
<ControlTemplate TargetType="ProgressBar">
or
<Trigger Property="ProgressBar.Orientation" Value="Vertical">

In Template, can I make a trigger change Path.Fill when Path is a ContentPresenter?

I have a button template, where ContentPresenter is actually a Path.
On MouseOver, I want to change the Path.Fill.
See the template:
<Style x:Key="spinButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border x:Name="Bd" BorderThickness="0" Background="Transparent" CornerRadius="2">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#666666"/>
<Setter Property="Control.Foreground" Value="#999999"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the code that uses this template:
<RepeatButton Style="{StaticResource spinButtonStyle}">
<Path blah blah blah/>
</RepeatButton>
Now, in this case, that ContentPresenter is a Path. Is there any way to change the Path.Fill color in the XAML?
All you need to do now is bind the Path Fill property to your RepeatButton Foreground property:
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type RepeatButton}}}"

AdornerDecorator and tab stop issues

I am using IDataErrorInfo to validate and indicate errors in my text boxes. I am finding I have to tab once for the text box and once for the adornerdecorator.
I have an error template:
<ControlTemplate x:Key="ErrorTemplate">
<StackPanel KeyboardNavigation.IsTabStop="False" >
<Border KeyboardNavigation.IsTabStop="False" BorderBrush="Red" BorderThickness="1" Padding="2" CornerRadius="2">
<AdornedElementPlaceholder KeyboardNavigation.IsTabStop="False" />
</Border>
</StackPanel>
</ControlTemplate>
a textbox template:
<Style x:Key="TextBoxInError" TargetType="{x:Type TextBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Margin" Value="0,5,0,5"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="HorizontalContentAlignment" Value="left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid KeyboardNavigation.IsTabStop="False" >
<Border KeyboardNavigation.IsTabStop="False" x:Name="Border" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" Padding="2" CornerRadius="2">
<ScrollViewer IsTabStop="False" Margin="0" x:Name="PART_ContentHost" Style="{DynamicResource SimpleScrollViewer}" Background="{TemplateBinding Background}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and declare a text box like this:
<AdornerDecorator KeyboardNavigation.IsTabStop="False" >
<TextBox Margin="5,5,5,3" x:Name="txtName" IsEnabled="{Binding EditMode}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"
Text="{Binding ApplicationName, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}"
Height="25" MaxLength="50" MaxLines="1" Style="{StaticResource TextBoxInError}"/>
</AdornerDecorator>
If the adorner is round one text box as above then I tab once to leave the text box and once to leave the 'adornment' (it seems) If I have the adorner around a stackpanel of text boxes then I tab once each for the text boxes then have to go back through all the 'adornments' in turn. When tabbing through the adornments the focus goes on the red border defined in the control template..
any ideas?
thanks
Add this to the window's resources section:
<Style TargetType="{x:Type Control}">
<Setter Property="Focusable" Value="False"/>
</Style>
For more information look at my blog: http://www.nbdtech.com/blog/archive/2008/05/25/WPF-Problems-with-Keyboard-Focus-When-Using-Validation.aspx

Resources