Looking for a Office 2007 Style zoom slider template - wpf

Has anyone seen a good template for a Office 2007 style zoom slider?
As shown in this picture
alt text http://www.theexceladdict.com/images/zoom_controls_excel_2007_2003.jpg

Something like this would be very easy to create.
First create a button style:
<Style x:Key="ZoomIncreaseDecreaseStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Ellipse Stroke="Gray" x:Name="Ellipse">
<Ellipse.Fill>
<RadialGradientBrush ... />
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Ellipse" Property="Fill">
<RadialGradientBrush ... />
</Setter>
</Trigger>
</ControlTemplate.Trigger>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style>
Then modify the ControlTemplate in Blend (create copy), and add something like this around the <Grid>:
<DockPanel>
<RepeatButton
DockPanel.Dock="Left"
Command="{x:Stastic Slider.DecreaseLarge}"
ControlTemplate="{StaticResource ZoomIncreaseDecreaseStyle}">
<Path Data="{StaticResource MinusGeometry}" />
</RepeatButton>
<RepeatButton
DockPanel.Dock="Right"
Command="{x:Stastic Slider.IncreaseLarge}"
ControlTemplate="{StaticResource ZoomIncreaseDecreaseStyle}">
<Path Data="{StaticResource PlusGeometry}" />
</RepeatButton>
<Grid>
...
You can play with the button stroke color, gradient fill, and the + and - paths to get it the way you want it. I assume the actual Office 2007 buttons are copyrighted so you probably won't be able to copy them too closely without infringing. But this will give you something visually very similar.

Related

Button opacity does not apply

So I am trying to make a button template. However, I cannot get background opacity to work, despite having implemented it exactly the same way as for the parent container (where it works). If I completely remove the background setter from the template, then it correctly inherits from the parent container, but then only the text of the button is clickable (and not the surroundings), so it appears that I am required to set the background for the button itself.
How do I make the background of the buttons identical the the back ground of the parent control, without losing the ability to click the entire button (and not just the text)?
My XAML looks like this:
<Grid DockPanel.Dock="Top">
<!-- This is what I also want for my buttons-->
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.8" />
</Grid.Background>
<UniformGrid
HorizontalAlignment="Center"
Columns="4"
Width="800"
Height="50">
<UniformGrid.Resources>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<!-- And this is how I try to achieve it -->
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Black" Opacity="0.8" />
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.Foreground" Value="Silver"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UniformGrid.Resources>
<Button
Content="{Binding ValuationButtonText}"
Command="{Binding NavigationCommand}"
CommandParameter="valuation"
Foreground="{Binding ValuationButtonForeground}" />
<Button
Content="Opdater Leasing Core"
Command="{Binding NavigationCommand}"
CommandParameter="leasingCore"
Foreground="{Binding LeasingCoreButtonForeground}" />
<Button
Content="Opdater Motorregister"
Command="{Binding NavigationCommand}"
CommandParameter="motorregister"
Foreground="{Binding MotorregisterButtonForeground}" />
<Button
Content="Behandles Manuelt"
Command="{Binding NavigationCommand}"
CommandParameter="manualProcessing"
Foreground="{Binding ManualProcessingButtonForeground}" />
</UniformGrid>
</Grid>
I actually found a solution. It is rather silly, but it works.
You replace the <Setter> background properties with this:
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Transparent" Opacity="1" />
</Setter.Value>
</Setter>
By having transparent background, the entire button becomes clickable, but the actual color (and opacity) of the button, is inherited from the parent container.

Two buttons with TextBox in the middle, ControlTemplate

Having a problem with this style, I can't find a way to make the following layout:
So I need just the corners of the buttons on the outside to be rounded, but I don't know how to do this, as the ControlTemplate for the buttons can't have the CornerRadius property as I would have to round all the corners.
This is the style I have got now, it just produces the style as seen above but with no CornerRadius.
P.S. There does seem to be an issue with the far left button going behind the TextBox which I noticed when the TextBox was slightly transparent. Not sure what is causing this!
XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Controls">
<Style TargetType="{x:Type local:NumericUpDown}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:NumericUpDown}">
<ControlTemplate.Resources>
<Style TargetType="Button">
<Setter Property="Padding" Value="5" />
<Setter Property="Background" Value="#434953" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Border x:Name="Border1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="#434953">
<ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border1" Property="Background" Value="#834953"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<Border Focusable="{TemplateBinding Focusable}">
<DockPanel Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
VerticalAlignment="Center"
Focusable="False">
<Button x:Name="PART_DecreaseButton" DockPanel.Dock="Left">
<Button.Content>
<Path Data="M0,0 L1,0 0.5,1Z"
Fill="White"
Width="8"
Height="6"
Stretch="Fill"/>
</Button.Content>
</Button>
<Button x:Name="PART_IncreaseButton" DockPanel.Dock="Right">
<Button.Content>
<Path Data="M0,1 L1,1 0.5,0Z"
Width="8"
Height="6"
Fill="White"
Stretch="Fill" />
</Button.Content>
</Button>
<TextBox x:Name="PART_TextBox"
Foreground="White"
HorizontalContentAlignment="Center"
HorizontalAlignment="Stretch"
Background="#22252b"
BorderThickness="0"
MinWidth="35" IsEnabled="True" Focusable="False" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" SourceName="PART_DecreaseButton">
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
you can encapsulate the whole thing and apply opacity mask like in this tutorial
http://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/

WPF Flat Repeat Button (ToolBar look)

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"/>

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

Bind template data field to instance (via "Use a custom path expression"?)

I have created a template of a button, which contains an Image and a TextBlock. Since I would like to change the appearance of both, I think they need to be in the Template. But, of course, not every instance of this template should present the same text and image.
Until now, i found a promising property called "Use a custom path expression" at the "Text" / "Source"-value filed of the TextBlock / Image at:
Data Binding... > Element Property > Use a custom path expression
I would now like to set this value at the instances of the button. I already tried to manually insert a myText="Lorem Ipsum" in the XAML of the Button, but that does not seem to work.
Thank you in advance for your help!
Update: This is, how the XAML looks like:
<TextBlock [...] Text="{Binding myText, ElementName={x:Null}, FallbackValue=Lorem}"/>
How do I access this or modify this, so it can be accessed?
Update 2: There already exist bindings for the TextBlock and the Image. At the moment, the XAML of the Button looks like that:
<s:SurfaceButton Command="{Binding SearchCustomCommand}" Style="{DynamicResource BasicButton}">
<StackPanel Orientation="Vertical" Height="60" Width="48" IsHitTestVisible="False">
<Image Source="{StaticResource ImageSourceToolboxSearchIcon}"
[...]
Stretch="Uniform" />
<TextBlock Text="{lex:LocText ToolboxButtonSearchesCustom}"
FontFamily="{DynamicResource button.font}"
[...]
FontSize="{DynamicResource button.size}"
Foreground="{DynamicResource button.color.default}"/>
</StackPanel>
</s:SurfaceButton>
I would now like to extract the Image and Textbox to the template (which also already exists), so I could refrence the Button in a way like this (whith all the Information about sizes and colors etc in the template and only the reference to the resource in the actual instance of the button - to be able to change the image/text for echt button seperately):
<s:SurfaceButton
Command="{Binding SearchPopularCommand}"
Style="{DynamicResource ToolboxButtonBig}"
ImageSource="{StaticResource ImageSourceToolboxSearchIcon}"
TextBlockSource="{lex:LocText ToolboxButtonSearchesCustom}"/>
I already copied the whole XAML for the StackPanel and the included TextBlock and Image to the Template. Now those are shown on every Button (which is fine), but i can't change the contents of them.
I'm sorry if the description is quite poor - I'm rather new to WPF...
Update 3: After some further research, I found questions similar to mine - which obviously describe the problem better than I could:
Button template with image and text in wpf
Creating an image+text button with a control template?
it is not necessary to edit button's template to insert image and text, you can set Button.Content property like this:
<Button>
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/image.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Button.Content>
</Button>
and it will work well. example above can be simplified but I inserted it like this for better understanding what is going on.
EDIT:
here are examples how it can be done in two different ways:
overwriting template:
<Button Content="Lorem Ipsum">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal">
<Image x:Name="ButtonImage" Source="../Images/mouseNotOverImage.png"/>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonImage" Property="Source" Value="../Images/mouseOverImage.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
complete button template definition you can find here
modifying style:
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/mouseOverImage.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/mouseNotOverImage.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Your first option would be to define a style (or styles), e.g.
<Window.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<Grid>
<Image .../>
<TextBlock Text="Test"/>
</Grid>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MyButton}" />
</Grid>
Your second option would be to use Blend to make a copy of the default button style and edit that
<Window.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<Grid>
<TextBlock Text="Test"/>
</Grid>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<!-- put your text and image here -->
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="167,151,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource MyButtonStyle}"/>
</Grid>
and a third option would be to create a custom control based on the default button style. You could then create dependency properties and use template bindings.

Resources