How to bottom align text in WPF RichTextBox - wpf

How I can bottom align text in RichTextBox? It seems that control doesn't support it directly. So I am looking for ways to emulate it. Ideally I would have the boundary of the control fixed and end of text aligned with the bottom.

The text comes from a ScrollViewer named PART_ContentHost inside the default control template for the TextBoxBase which is wrapped by the RichTextBox. You should override the control template and either have the ScrollViewer declare its VerticalAlignment to be Bottom, or have it template bind to the VerticalContentAlignment.
Below, I've done the latter. This is a modified version of the default control template as pulled from Blend. The only change I've made is to add VerticalAlignment="{TemplateBinding VerticalAlignment}" to the ScrollViewer.
(Also note that it references Microsoft_Windows_Themes which is defined as xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
I am unsure how this will work if Aero is not on the user's machine)
<Style x:Key="BottomAlignedTextBoxBaseStyle"
TargetType="TextBoxBase"
BasedOn="{StaticResource {x:Type TextBoxBase}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
<ScrollViewer x:Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Microsoft_Windows_Themes:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Background"
TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, to use it, simply say:
<RichTextBox Style="{StaticResource BottomAlignedTextBoxBaseStyle}"
VerticalContentAlignment="Bottom" />

Related

Underscores not displayed in WPF

On my whole application, I've some underscores (_) which are not displayed.
It's due to the accessor. But how can I disable it? Application wide? I don't have them on labels, textboxes, ...
Thank you
To disable underscores globally for all labels you can override the default template for labels like this:
<Style x:Key="{x:Type Label}"
TargetType="{x:Type Label}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</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>
It differs from the default template in this line: RecognizesAccessKey="False".
Put this style in global resources of your application (App.xaml) and your labels will not recognize underscores anymore.
Use two underscores:
name = "__something";
One easy solution is to not use <Label>. <TextBox> doesn't mess with underscores.
Have you tried doubling the underscores?

How do I replace a ScrollViewer with a ContentPresenter on a ListBox?

According to a post at the very end of this thread you can replace the ScrollViewer of a ListBox with a ContentPresenter to disable scrolling in a nested scenario.
However, I don't know how to replace the ScrollViewer. Do I have to re-create the template?
Yes, you'll need to assign your own template but you'll be using an ItemsPresenter, not ContentPresenter. The default template for ListBox includes a ScrollViewer wrapped around its ItemsPresenter. By making a copy of the template you can just remove the ScrollViewer and leave the rest of the template (and behavior) intact. This is the default template without the ScrollViewer (you can also remove the IsGrouping Trigger if you want):
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

WPF Label Design

I have a label in WPF which I want to restyle so it has rounded corners.
I have the below code already:
<Style TargetType="{x:Type Label}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Margin" Value="2,2,2,2"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Blue"/>
</Style>
Can anyone please assist with how I would add a corner Radius to this label
many thanks
You'll need to change the ControlTemplate for the Label in order to get rounded corners. The Label control itself doesn't expose a CornerRadius property.
Add the following to your Style and you'll get rounded edges on your Label. I arbitrarily set it to "3" below, but you can set it to whatever your needs dictate.
<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"
CornerRadius="3">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Using the Border element would be simpler.
<Border CornerRadius="10" BorderThickness="2" BorderBrush="Blue" Background="Red" Margin="2">
<Label Content="Lorem ipsum" />
</Border>

WPF SystemColors: color of TextBox border

I am trying to make a search TextBox with an embedded magnifying glass icon. I have the following markup so far:
<Border DockPanel.Dock="Bottom" Margin="2,4,0,4"
BorderThickness="1" SnapsToDevicePixels="True"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Image Source="/Resources/search-13x13.png" Width="13"/>
</StackPanel>
<TextBox Name="searchTextBox" DockPanel.Dock="Bottom" BorderThickness="0"
Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"/>
</DockPanel>
</Border>
However, I can't find the entry in SystemColors which will give me the same color as the standard TextBox border. This is a blueish color by default. Am I being really stupid here?!?
EDIT: btw, the image is contained in a stackpanel because I'm planning to put a dropdown arrow in there as well.
You might try using Microsoft.Windows.Themes.ListBoxChrome instead of the Border; that's what the default template for TextBox uses:
<ControlTemplate TargetType="TextBoxBase"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<mwt:ListBoxChrome Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter TargetName="Bd" Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You should be able to use just ListBoxChrome instead of Border rather than re-templating TextBox to match the code you presented.
I was able to get it programatically with:
TextBox.BorderBrush = SystemColors.ControlDarkBrush;
Based on Nicholas Armstrong's answer, that solution is working for me:
<Style TargetType="{x:Type local:CustomTextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomTextBox}">
<mwt:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
<ScrollViewer x:Name="PART_ContentHost" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To anyone that is looking for a list of Brushes and what their colors will look like with different themes/OS:
Originally posted: http://blogs.msdn.com/b/wpf/archive/2010/11/30/systemcolors-reference.aspx.
It seems hackish, but I've had the best luck by creating a textbox (perhaps collapsed) and binding to its border brush.

Why does my customized WPF RadioButton not look right?

I am replacing the style of a radio button with that of a check box. I know you are going to say that is a bad idea, but it really needs to work this way. Anyway, using Expression Blend I was able to extract the style of the CheckBox and apply it to a RadioButton. My only problem is now that when it draws there is no border. Can anyone tell me why? Here is the code (THIS HAS BEEN UPDATED SINCE THE ORIGINAL POST):
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale"
Title="Customized RadioButton" Width="496" ShowInTaskbar="True" ResizeMode="NoResize" Height="105">
<Window.Resources>
<SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
<Style x:Key="RadioButtonCheckBoxStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</BulletDecorator>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<CheckBox Height="16" Name="checkBox1" Width="120">CheckBox</CheckBox>
<RadioButton Height="16" Name="radioButton1" Width="120">RadioButton</RadioButton>
<RadioButton Content="RadioButton with CheckBox Style" Margin="4" Style="{DynamicResource RadioButtonCheckBoxStyle}" FocusVisualStyle="{x:Null}" GroupName="Header" IsChecked="False" IsEnabled="True" HorizontalAlignment="Center" />
</StackPanel>
alt text http://img260.imageshack.us/img260/65/33733770.jpg
To see how this displays, please paste it into Visual Studio. You will see that the Customized RadioButton doesn't look correct. It is missing the regular 3D effects that a CheckBox normally has. I don't care about any content (I won't be having any) I just want it to look like a normal CheckBox.
Since you're overriding the template, you need to attach to the class's properties yourself.
Declare a border in the template in the following fashion:
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
Also, you've got a small bug. You've defined the setter for "BorderBrush" multiple times in your style.
Edit: After seeing your image, here's your real issue:
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
You were missing the BorderThickness in your bullet. It was effectively setting your thickness to 0, which is why you didn't see anything.
An image might help here, but where do you expect the border to be? Are you expecting a border around the entire content?? The only border there should be according to the template you're using is around where the check mark will be. If you want a border around all the content then you need to add a Border into the ControlTemplate like so:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignme nt}" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Side note: You have set FocusVisualStyle="{x:Null}" on the Checkbox itself, but your template changes this property in its HasContent property trigger. If you really don't want a FocusVisualStyle you should remove that setter.

Resources