Themes - code snippets

[strobotone]

Hey folks,

Feel free to post your XAML / WPF related ideas here. (stuff like custom sliders / rotary knobs, custom windows ...)
Maybe you come up with new effects or design ideas.

[strobotone]

Custom Slider templates i use for my theme which also includes animations:

<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<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}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!--Rondomize Slider Thumb-->
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Height" Value="10"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border x:Name="Thumb" BorderThickness="1" CornerRadius="2" BorderBrush="#aaaaaa" Margin="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.3">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffdddddd" />
<GradientStop Color="#ffaaaaaa" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.Opacity)"
To="1" Duration="0:0:0.04"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.Opacity)"
To="0.2" Duration="0:0:0.04"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border
Margin="0"
CornerRadius="3"
Height="12"
Grid.Row="1"
Background="#181818"
BorderBrush="#999999"
BorderThickness="1" />
<Track Grid.Row="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>

<Style TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Style>

<!--Parameter Slider Thumb-->
<Style TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Height" Value="10" />
<Setter Property="Width" Value="14" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border x:Name="Thumb" BorderThickness="1" CornerRadius="2" BorderBrush="#aaaaaa" Margin="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.3">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffdddddd" />
<GradientStop Color="#ffaaaaaa" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.Opacity)"
To="1" Duration="0:0:0.04"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.Opacity)"
To="0.2" Duration="0:0:0.04"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!--Slider Track-->
<Style x:Key="SliderTrackStyle" TargetType="{x:Type Border}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="12"/>
<Setter Property="BorderBrush" Value="#999999"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Background" Value="#181818"/>
</Style>


note that the Randomize Slider and Parameter Slider are different Slider Types so i used different templates for them.
you can apply this also to vertical sliders but you will need GridColumns instead of GridRows then.

now go ahead and customize all the remaining sliders in the BuzzGUI

[strobotone]

here is the updated theme with new sliders, buttons, dialogs, backgrounds and icons :
http://strobotone.de/content/developmen ... on_3.2.zip

[flat]

Good one, thanks for posting.

In my pc, Parameter Window displays a background @ the window title bar and margin around window different than the one in your screenshot:




Is this difference "Windows Theme" related, or what?

[mantratronic]

I tried this with my gui machines to see what it would look like:

looks good but it throws an exception in Algo that crashes the GUI. not sure if I did something odd or if its the theme. (also, it looks the same on my machine as on flat's)

oh, i just noticed the background colour of the peer machine's parameter window is darker when the window is higher up on the screen, and Loop Recorder has the same GUI crash as Algo

[tinga]

I tried this with my gui machines to see what it would look like:see above

It's the same for all peer machines

[strobotone]

sure, this is on purpose.
peer (Control) machines should look different. but the text is too dark and the sliders to bright. this will be fixed.
depending on the machine type you can assign anything you want to the backgound or whatever you got.

and yes, the margin around the the actual parameter window depends on the windows theme.
there is a way to totally customize windows btw. (with transparent backgound, rounded corners etc.) but this requires a new setup of a window with a new tilebar to make it dragable and stuff. would look cool though.

[strobotone]

Custom CheckBox anyone?

<LinearGradientBrush x:Key="CheckBox_Gradient" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#666" Offset="0.4"/>
<GradientStop Color="#333" Offset="1.0"/>
</LinearGradientBrush>

<!--Custom CheckBox-->
<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Padding" Value="4,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Border x:Name="Border" Background="#eeeeee" BorderBrush="#555555" BorderThickness="1" CornerRadius="2" />
<Border x:Name="CheckMark" Background="{StaticResource CheckBox_Gradient}" BorderBrush="Transparent" CornerRadius="1" SnapsToDevicePixels="False" ClipToBounds="False" Margin="2"/>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#ccc" TargetName="Border"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="#ccc" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="#d1d1d1" TargetName="Border"/>
<Setter Property="BorderBrush" Value="#7c7c7c" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

redownload the theme and take a look at the WavetableView how it is applied.

[strobotone]

I tried this with my gui machines to see what it would look like:

looks good but it throws an exception in Algo that crashes the GUI. not sure if I did something odd or if its the theme. (also, it looks the same on my machine as on flat's)

oh, i just noticed the background colour of the peer machine's parameter window is darker when the window is higher up on the screen, and Loop Recorder has the same GUI crash as Algo

thanks for testing
i fix this.
it is some styling issue with the textbox used in the gui of the machine.

LoopRecorder:
another thing is that one is able to style fontfamily and fontsize but not the textcolor (foreground) in its gui.
the path for the browsebutton is always displayed black. even though it is a TextBlock type.

[strobotone]

What kind of buttons did you use there?
having kinda problems tofigure out why they get clipped.

please redownload the theme.

[mantratronic]

What kind of buttons did you use there?
having kinda problems tofigure out why they get clipped.

I think that's my fault for not really knowing xaml at the time I made it. The buttons are too big and I messed up the grid iirc. but it still looks better in your theme

[strobotone]

hehe..thanks

everything should work now. (with some uncustomized exeptions)
next will be the quicknewmachinewindow.

[Dean]

I am having some problems with the following code :

yes the machines themselves are smaller than the defaults.

we should put this topic in a new thread.
if you take a look in MachineControl.xaml you find:

<Border Name="Border" Width="84" Height="34" BorderThickness="0" SnapsToDevicePixels="True" HorizontalAlignment="Left" VerticalAlignment="Top">

<Grid Name="MachineGrid" SnapsToDevicePixels="True">

<Rectangle Name="borderRect" StrokeThickness="2">
<Rectangle.Stroke>
<SolidColorBrush Color="{Binding Path=Machine.Graph.Buzz.ThemeColors[MV Machine Border]}"/>
</Rectangle.Stroke>
</Rectangle>

<Image Source="{Binding Path=MachineImageSource}" SnapsToDevicePixels="True"/>

<Rectangle Name="machinebody" Width="84" Height="34" RadiusX="2" RadiusY="2" Stroke="#DDDDDD" StrokeThickness="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="#48000000"/>
<GradientStop Offset="1" Color="#38000000"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
...
...
</Border>

there you find all the elements that make up the machine´s appearance. (LED, buttons, texts ...)

in that, I don't know where to find it in default theme? So, should I just add anywhere inside MachineControl.xaml, and it will work if I edit the values?

[strobotone]

in the default theme it look like this:

<Style x:Key="MachineControlStyleBase" TargetType="{x:Type local:MachineControl}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MachineControl}">
<Grid Name="Root">
<!--
<Grid.CacheMode>
<BitmapCache EnableClearType="True" RenderAtScale="1" SnapsToDevicePixels="True"/>
</Grid.CacheMode>
-->
<Image Name="shadowImage" Source="gfx/shadow.png" IsHitTestVisible="False" Visibility="Collapsed"/>
<Border Name="Border" Width="100" Height="50" BorderThickness="0" SnapsToDevicePixels="True" HorizontalAlignment="Left" VerticalAlignment="Top">
...

[Dean]

in the default theme it look like this:

<Style x:Key="MachineControlStyleBase" TargetType="{x:Type local:MachineControl}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MachineControl}">
<Grid Name="Root">
<!--
<Grid.CacheMode>
<BitmapCache EnableClearType="True" RenderAtScale="1" SnapsToDevicePixels="True"/>
</Grid.CacheMode>
-->
<Image Name="shadowImage" Source="gfx/shadow.png" IsHitTestVisible="False" Visibility="Collapsed"/>
<Border Name="Border" Width="100" Height="50" BorderThickness="0" SnapsToDevicePixels="True" HorizontalAlignment="Left" VerticalAlignment="Top">
...

thank you very much!
I could resize both container and size of machine, but shadow ... no... I don't know why...
There is this code to edit:

<Image Name="shadowImage" Source="gfx/shadow.png" IsHitTestVisible="False"

Visibility="Collapsed"/>
<Border Name="Border" Width="60" Height="30" BorderThickness="0"

SnapsToDevicePixels="True" HorizontalAlignment="Left" VerticalAlignment="Top">

but it won't resize the actual shadow... I even tried editing the shadow.png... In the end I turned off all shadows... and I noticed a very small performance difference in a file which used hundreds of machines...
it made me think... are there are things I could edit out in the theme (shadows I turned off by the setting though, not in theme) which doesn't make a difference for up to 50 machines, but might make a difference for 500 of them?
I thought, maybe this could be a way to keep the new version but removing something which I don't need...
any ideas? (I know themes are just visual, but I figured there might be something, the buzz host doesn't behave the same when forced to deal with 100s of machines
as just a few of them...)
or maybe just other xml code which I could edit myself to keep cpu usage fresh for those big projects...

edit: one more thing - is there a way to completely remove the "DELETE" button? (I found the <Style x:Key="DeleteButtonStyle" ... code but if I just delete it I get an error... I can understand how to hide it (set size to 0), but I would prefer not to load it at all)

edit2: now that I've made the machines smaller... when I load a template,I'm surprised to find that machines are loaded more tightly together than before.
Is the distance between machines measured in "machine sizes" or something? it doesn't make any sense, I think the distance ought to be greater,
if the machines themselves are smaller (because the distance to each center ought to be bigger in such a scenario)

thanks again! really appreciate your help sir!

[strobotone]

I was inspired by the mixIO GUI

If you find it useful, you can use the commands below and bind them to buttons.
By default they are used in the context menu of the MachinWindow.

Command="{Binding AddTrackCommand}"
Command="{Binding DeleteLastTrackCommand}"

[mcbpete]

How easy would it be to make the parameter window semi transparent? I've tried to find a place to put in <border .... opacity="0.9" /> as I've done with the right click and 'typing' menu, but I can't quite work out how I'd do it with that window.

[strobotone]

Well, if you mean the window in general modify ParameterWindow.xaml:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006 ... esentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="clr-namespace:BuzzGUI.ParameterWindow;assembly=BuzzGUI.ParameterWindow"
xmlns:bgc="clr-namespace:BuzzGUI.Common;assembly=BuzzGUI.Common"
xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=BuzzGUI.Common"

MaxHeight="700" MinWidth="360" MaxWidth="500" MinHeight="40" ShowInTaskbar="False"
Style="{DynamicResource ParameterWindowStyle}" AllowsTransparency="True" WindowStyle="None" Opacity="0.5"
SizeToContent="WidthAndHeight">
.....

If you want to control just its background and so on modify Controls.xaml :
...
<Style TargetType="{x:Type Window}" x:Key="ParameterWindowStyle">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SizeToContent" Value="Height"/>
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome ResizeBorderThickness="8" CaptionHeight="20" CornerRadius="6" GlassFrameThickness="0"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#dddddd"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">

<Border Style="{StaticResource activeWindowStyle}">

<Border BorderThickness="1" BorderBrush="#80000000" Background="Transparent" CornerRadius="5">
<Border BorderThickness="2" BorderBrush="#dddddd" CornerRadius="4" Padding="2,2,2,2">
<Border.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0" Opacity="0.5">
<GradientStop Color="#080808" Offset="0.3"/>
<GradientStop Color="#141414" Offset="0.5"/>
<GradientStop Color="#080808" Offset="0.7"/>
</LinearGradientBrush>
</Border.Background>
...

[mcbpete]

Thankyou thankyou thankyou

[strobotone]

glad i can help.