<ControlTemplate TargetType="TabItem">
<Border x:Name="Border" Margin="{TemplateBinding Margin}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource DarkGray}" CornerRadius="5,5,0,0">
<ContentPresenter x:Name="Content" ContentSource="Header"
TextElement.FontSize="14" TextBlock.TextAlignment="Center"
HorizontalAlignment="Center" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center">
</ContentPresenter>
</Border>
in the above code there will be a default textblock inside ContentPresenter tag. I need to set padding for that Textblock.
TextBlock.Padding="8"
will not work. How to set padding for that TextBlock.
I'm trying to create buttons with smaller hit area to prevent misoperation in an industrial touchscreen PC program. Here is a sample,
and only the white area should response to touch and mouse operations.
I've tried to use ControlTemplate
<ControlTemplate x:Key="ButtonToTouch" TargetType="{x:Type Button}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Button Background="{x:Null}" BorderBrush="{x:Null}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Button.Content>
<Grid Margin="8" >
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Rectangle Fill="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Button.Content>
</Button>
</Grid>
</ControlTemplate>
Now mouse enter event works that way, but it seems that every visible pixel in the button template can trigger the click event, so i have to set the background of the border to null, and set the background somewhere out of the template.
Any suggestions? Thanks for any help.
set IsHitTestVisible="False" on Border. With 8 Margin on Grid, 8px wide area will not register input.
<ControlTemplate x:Key="ButtonToTouch" TargetType="{x:Type Button}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}"
IsHitTestVisible="False"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"/>
<Grid Margin="8">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Rectangle Fill="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Grid>
</ControlTemplate>
I have some radiobuttons in an app that works with touch.
Because the end-user can have thick fingers, I want to make the circle and text int he radiobutton bigger.
Problem is, I can only make the text bigger, not the circle in the radiobutton.
<RadioButton VerticalAlignment="Center" x:Name="rbtnContainers" Click="SetContainers" FontSize="18">Containers</RadioButton>
Using height doesn't work either. It makes the radiobutton bigger, but the circle remains the same.
Any hint or answer is appreciated.
This should work for you.
<Viewbox Height="40">
<RadioButton></RadioButton>
</Viewbox>
another alternative is to write your own ControlTemplate for the RadioButton and change its appearance as you want.
A more of a hack would be to try to simply transform the object with something like...
<RadioButton.RenderTransform>
<CompositeTransform ScaleX="5" ScaleY="5"/>
</RadioButton.RenderTransform>
Just remember that ScaleX and ScaleY needs to be equal, otherwise the object will look stretched awkwardly
According to my own experimenting, the rendering of this is not at all messed up (e.g. no alignment issues, etc.)
To resize only the circle, one can use RadioButton template and change Width and Height of BulletChrome.
<ControlTemplate TargetType="RadioButton" x:Key="CustomRadioButtonStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<BulletDecorator Background="#00FFFFFF">
<BulletDecorator.Bullet>
<mwt:BulletChrome Height="25" Width="25" Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" IsChecked="{TemplateBinding ToggleButton.IsChecked}" IsRound="True" />
</BulletDecorator.Bullet>
<ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="ContentControl.HasContent">
<Setter Property="FrameworkElement.FocusVisualStyle">
<Setter.Value>
<Style TargetType="IFrameworkInputElement">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Margin="14,0,0,0" SnapsToDevicePixels="True" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>4,0,0,0</Thickness>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
After hours trying things I finally found a rather simple solution to increase the size of the button, without increasing the associated label.
In the document outline, right-click the radio control, Edit Template > Edit a copy
Give it a name and decide if you want to store it as an App (global) style or local (current window) style.
In the generated xaml code, edit the values minWidth, minHeight of the field Ellipse from the section below
Apply that style to your RadioButton
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" Margin="2">
<!-- HERE change minWidth/minHeight for the dimensions of the button -->
<Ellipse x:Name="optionMark" Fill="{StaticResource RadioButton.Static.Glyph}" MinWidth="20" MinHeight="20" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
I followed the instruction in this blog to add ScrollIntoView to ItemsControl.
But this makes the border invisible:
<ItemsControl BorderBrush="Black"
BorderThickness="3">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<TextBlock Text="Test" />
<TextBlock Text="Test" />
<TextBlock Text="Test" />
</ItemsControl>
In order to display the border, I have to remove:
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
But this way I won't be able to use the ScrollIntoView method.
Any ideas? Thanks
You need to include the border in the template.
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
All windows in Aero have this kind of whiteish background on their text. I'd like to create an equivalent of this effect for a GlassWindow I'm using that has a TextBlock in the label area, but I'm not really a designer so I have no idea how to approach this. How can I reproduce this background effect?
This could lead you in the right direction: Glowing Label Controls On A Glass Surface
EDIT: Modified the original sample (linked) and added color tot the blur
<Style TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Grid>
<ContentPresenter
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Foreground="White" Text="{TemplateBinding Content}" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
<ContentPresenter.Effect>
<BlurEffect Radius="10" />
</ContentPresenter.Effect>
</ContentPresenter>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>