I'm customizing a ListBoxItem, and I'm struggling with a couple of issues.
The ItemTemplate is a StackPanel of vertical orientation, whose height is set to 120px. But only clicking the label or the image causes the ListBox to select the item, not the open area below the label. How do I get the open area to also cause a change in selection? I'm considering adding a styled Button as ListBoxItem, but I wonder if it can be done any easier.
There's a 1px line between the ListBox container and the ListBoxItem's that I'm not able to get rid of. How do I get rid of it? Here's a screenshot:
XAML:
<ListBox Grid.Row="1" ItemsSource="{Binding MenuButtonInfoList}"
SelectedIndex="{Binding SelectedMainMenuIndex, Mode=TwoWay}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Width" Value="160px" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryColor}" />
<Setter Property="BorderThickness" Value="0, 1, 0, 0" />
</Style>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="MenuButtonBorder" SnapsToDevicePixels="True"
BorderBrush="{StaticResource PrimaryColor}" BorderThickness="0, 0, 0, 1">
<StackPanel Orientation="Vertical" Height="120px">
<Image Source="{Binding ImageFilePath}" Height="30" Width="30" />
<Label x:Name="MenuButtonLabel" Content="{Binding Label}"
FontSize="{StaticResource Title1FontSize}"
Foreground="{StaticResource PrimaryColor}" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="MenuButtonBorder" Property="Background" Value="{StaticResource PrimaryColor}" />
<Setter TargetName="MenuButtonLabel" Property="Foreground" Value="{StaticResource HighlightColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
How do I get the open area to also cause a change in selection?
Set Background="Transparent" on the StackPanel in your item template. That will make the entire panel hit testable.
There's a 1px line between the ListBox container and the ListBoxItem's that I'm not able to get rid of. How do I get rid of it?
Override the ListBox template to remove the 1px padding:
<ControlTemplate TargetType="{x:Type ListBox}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<!-- Padding="1" (removed) -->
<ScrollViewer Padding="{TemplateBinding Padding}"
Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true" />
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Place the above in a Setter for the Template property in your ListBox style.
Related
I have created a ComboBox template to match my application style for which I pretty much set all colors to different values.
I want to have three different state colors for the comboboxitem.
normal Item - Background is White
MouseHover or Keyboard selection - Background is Dark Blue
Is Pressed - Background is Light Blue (you can only see this color, when you press the left mousebutton down, after releasing the mouse button, the popup will close)
The user should see a color feedback, when he presses a comboboxitem
Restriction: I'd rather not use a custom combobox class that supports the isPressed event, since I want to keep the usability as high as possible.
My current XAML style
Templates
<ControlTemplate x:Key="ComboBoxToggleButton.Template" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
BorderThickness="1"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"/>
<Border Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1"
Background="{TemplateBinding Background}" />
<Path x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="{TemplateBinding Foreground}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox.Template" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
<ControlTemplate x:Key="ComboBox.Template" TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton.Template}"
Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}" />
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox.Template}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"
Foreground="{TemplateBinding Foreground}" />
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" />
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxItem.Template" TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
Styles
<Style x:Key="ComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template" Value="{StaticResource ComboBox.Template}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Template" Value="{StaticResource ComboBoxItem.Template}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
<!-- Trigger for IsPressed somehow? -->
</Style.Triggers>
</Style>
Most of the code is not neccessary, but I included it, so others can copy paste it to try.
I also tried to edit the ComboBoxItem Template with adding a Button around the ContentPresenter but that disabled the selection event (so you couldn't select any item from the comboBox)
Most of the code is from the msdn: combobox-styles-and-templates
I've overcome this issue by replacing the Border in the template with a PressableBorder control which is a Border with IsPressed property and then using the property in the trigger.
Hint: normally one would also use BoxedBooleans in the dependency property to avoid constant boxing. It's omitted for simplicity.
public class PressableBorder : Border
{
#region public bool IsPressed { get; protected set; } // dp
public bool IsPressed
{
get => (bool)GetValue(IsPressedProperty);
protected set => SetValue(IsPressedPropertyKey, value);
}
private static readonly DependencyPropertyKey IsPressedPropertyKey =
DependencyProperty.RegisterReadOnly(nameof(IsPressed), typeof(bool), typeof(PressableBorder),
new PropertyMetadata(false));
public static readonly DependencyProperty IsPressedProperty =
IsPressedPropertyKey.DependencyProperty;
#endregion
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
IsPressed = true;
base.OnMouseLeftButtonDown(e);
}
protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
{
IsPressed = false;
base.OnMouseLeftButtonUp(e);
}
}
I want to Style an Border inside a ControlTemplate. But I don't know how to access it. My Style looks like this:
<Style x:Key="RedCell" TargetType="DataGridCell" BasedOn="{StaticResource MYDGCellStyle}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Grid>
<Grid Grid.ZIndex="86" x:Name="CellContenGrind" Background="{TemplateBinding Background}" />
<Border Grid.ZIndex="87" x:Name="ContentBorder" BorderBrush="White" Background="Crimson" CornerRadius="25">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Grid Grid.ZIndex="88" x:Name="CellGridFocused"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="CellGridFocused" Value="{DynamicResource Brush_DataGridCellFocused}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="CellContenGrind" Value="{DynamicResource Brush_DataGridSelected}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ungelesen}" Value="0">
<Setter Property="Background" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
I need the Background="{TemplateBinding Background}" on my CellContentGrind because of some other stuff, so I can't just move that to my Border.
If ungelesen = 0, I want the Background of my ContentBorder to be Green. How can I do that?
Why not move the Style to the Border itself?
<Border Grid.ZIndex="87"x:Name="ContentBorder" BorderBrush="White" CornerRadius="25">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="Crimson" />
<Style.Triggers>
<DataTrigger Binding="{Binding ungelesen}" Value="0">
<Setter Property="Background" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
Note that Background is set with Setter now to make overridable with DataTrigger.
I am using a listbox to display images. When a listbox item is selected it displays a border around the image. Instead of displaying border around the image it shifts the image towards right.
Listbox style:
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=UriSource}"
Stretch="Fill"
Width="639" Height="530">
</Image>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="VerticalContentAlignment"
Value="Center" />
</Style>
List box item style:
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
SnapsToDevicePixels="True"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="12" />
<Setter Property="Width" Value="639" />
<Setter Property="Height" Value="530" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="12" />
<Setter Property="Width" Value="639" />
<Setter Property="Height" Value="530" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is because in your ListBoxItem style, you're changing the border's thickness, from 0 in the normal case, to 12 when the item is selected. This shifts the content by 12pt.
You have several of possible solutions here, here are two possibilities:
Always use a 12pt border, but use a Transparent or {x:Null} brush in the unselected state
Use a 12 margin on your ContentPresenter, and set it to 0 in the triggers
Used Layout transform instead of using Render transform.
Set Margin="-2,0,-2,0"
Padding="-1,0,-1,0" for listbox.
and
I was wondering if anyone has ever run into this situation. Basically what I'm trying to do is override the default listviewitem to customized the the selected background/foreground. I got that working all fine and dandy. Problem is, I noticed that on listviews where I have implemented gridviews the columns are broken. I'm not sure what's going on to break this. My approach to override the default style is used blend to get the full style by editing a copy of template. Modified it as needed. Applied it. This is pretty much what it looks like. Any thoughts?
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="2,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="BorderBrush" Value="{DynamicResource CustomBorderBrush}" />
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource CustomBackgroundBrush}" />
<Setter Property="Foreground" Value="{DynamicResource CustomForegroundBrush}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListView Grid.Row="0" Grid.Column="0" Margin="15,15,0,0" Name="lstResources" SelectionChanged="lstResources_SelectionChanged">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn x:Name="column1" Header="column1" Width="100" CellTemplate="{StaticResource column1template}"/>
<GridViewColumn x:Name="column2" Header="column2" Width="100" CellTemplate="{StaticResource column2template}" />
<GridViewColumn x:Name="column3" Header="column3" Width="200" CellTemplate="{StaticResource column3template}" WPFUtility:GridViewColumnResize.Width="*"/>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<DataTemplate x:Key="column1template">
<DockPanel>
<TextBlock HorizontalAlignment="stretch" TextTrimming="CharacterEllipsis" >
<TextBlock.Text>
<Binding Path="mycontent"/>
</TextBlock.Text>
</TextBlock>
</DockPanel>
</DataTemplate>
I inspected the control templates for the ListViews in both cases, and came to the conclusion that the styling wasn't working for GridViews because they require a GridViewRowPresenter to correctly layout the row data, rather than the ContentPresenter.
Of course, if you do that, you'll find your normal ListViews which don't use GridViews no longer format correctly, because they require a ContentPresenter.
I wasn't entirely sure of the neatest way around that, but stumbled across this blog post: http://www.steelyeyedview.com/2010/03/contentpresenter-gridviewrowpresenter.html
The gist of which I'll repeat here, in case it gets deleted:
His solution is a neat little hack, and seems to work. It makes use of both presenters, with the ContentPresenter hidden by default (Visibility="Collapsed"), and uses a trigger to make the ContentPresenter visible if the GridViewRowPresenter has no content. Since the GridViewRowPresenter has no content, it won't show anything anyway.
Adapting your Style to include his fix, you'd have something like this (Some code removed for focus):
<Style TargetType="{x:Type ListViewItem}">
<!-- Your Code -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<Grid>
<GridViewRowPresenter x:Name="gridrowPresenter"
Content="{TemplateBinding Property=ContentControl.Content}" />
<ContentPresenter x:Name="contentPresenter"
Content="{TemplateBinding Property=ContentControl.Content}" Visibility="Collapsed" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="GridView.ColumnCollection" Value="{x:Null}">
<Setter TargetName="contentPresenter" Property="Visibility" Value="Visible"/>
</Trigger>
<!-- Your Code -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
i search the web for TextBox with rounded corners and find a xaml code like below:
<Style TargetType="{x:Type my1:CustomTextBox}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate >
<Border Background="{TemplateBinding Background}" x:Name="Bd"
BorderThickness="2" CornerRadius="5" BorderBrush="#FFF9EAB6">
***<ScrollViewer x:Name="PART_ContentHost" />***
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#FFC7B0B0"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#FFC7B0B0"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="Foreground" Value="#FFC7B0B0"/>
</Trigger>
<Trigger Property="Width" Value="Auto">
<Setter Property="MinWidth" Value="120"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="27"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
i want to find out what is
<ScrollViewer x:Name="PART_ContentHost" />
in detail and why not properly work my template if delete this line from it,
please tell me completely in detail.
thanks alot.
The part named "PART_ContentHost" contains the control core, this is the textbox itself, besides the adornments. The textbox's code behind will look for it, so if you rename of delete, the control wont work.
In this case, the content is scrollable (as a textbox can scroll text horizontally and vertically).
use this part of xaml deign :
<TextBox x:Name="usernameText" Height="30" Width="300" TextWrapping="Wrap" Text="" FontSize="20" HorizontalContentAlignment="Center" LostFocus="usernameText_LostFocus">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TextBox.Resources>
</TextBox>
If you need a simple textbox with rounded corners, you can do it like that:
<Border Padding="5" CornerRadius="5" BorderThickness="1" BorderBrush="LightGray" SnapsToDevicePixels="True" Background="White">
<TextBox Background="Transparent" BorderThickness="0">This is beautifull ;)</TextBox>
</Border>
The ScrollViewer contains the actual content of the control. Your control isn't a real textbox, but actually a border (with rounded corners) surrounding a ScrollViewer, into which you would then need to place your text. If you don't need scrolling, you can replace the ScrollViewer with a text box, i.e.:
change
<ScrollViewer x:Name="PART_ContentHost" />
to
<TextBox x:Name="PART_ContentHost" />