it's my first question here so be gentle haha
I am using a WPF TextBox Element to enter some user information, in this example it's a username.
My problem with this is that I am able to scroll within the TextBox which I don't want, as it just looks terrible even if it is just a bit.
So I am looking for an option to turn the scrolling off. As you can see I am using a ScrollViewer, as the documentation suggests but if there are any other options for styling the TextBox I am more then willing to try :D
Thanks in advance.
<Style TargetType="{x:Type TextBox}"
x:Key="textBox1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border CornerRadius="16"
Background="{TemplateBinding Background}">
<ScrollViewer Margin="10,7.5"
x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
=> This is the Style of the TextBox in a RessourceDic.
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid Height="250"/>
<TextBlock x:Name="Error"
FontSize="14"
Foreground="DarkRed"
FontWeight="Bold"
Margin="5"
TextWrapping="Wrap"/>
<TextBlock Text="Benutzername" Margin="15,0,0,10" FontSize="20"/>
<TextBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Username"
Style="{StaticResource textBox1}"
Width="230"
Height="35"
FontSize="21">
</TextBox>
<TextBlock Text="Passwort" Margin="15,20,0,10" FontSize="20"/>
<PasswordBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Password"
Style="{StaticResource passwordBox1}"
FontSize="21">
</PasswordBox>
<Button x:Name="LogIn" Height="40" Width="120" Style="{StaticResource LogInBTN}" Foreground="Black" Margin="0,30,0,0" Click="LogInBTN_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="images/user.png" Height="25" Width="25" VerticalAlignment="Center"/>
<TextBlock Text="Einloggen" Margin="10,2,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
</Button>
<TextBlock Margin="0,20,0,0" Height="20" Width="250" Text="X - Passwort nicht korrekt" TextAlignment="Center" FontSize="16" Foreground="Red" Visibility="Hidden"/>
</StackPanel>
=> This is the Stackpanel where I use the TextBox.
as workaround, without overriding ScrollViewer:
<TextBox Height="30" Width="50">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Decorator x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
Related
hi i want to change the default mouse over color of ListViewItems in WPF and i tried this code to change the default mouse over color here is my code
<ListView x:Name="lv"
Background="Transparent"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="0,20,0,0"
>
<!--home-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Height="60" MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/alarms_home.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"
/>
<TextBlock Text="خانه"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_home"
Content="خانه"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--alarms-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/icons8_alarm_on_1.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"/>
<TextBlock Text="یادداشت ها"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_alarms"
Content="یادداشت ها"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--add notes-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/alarm_add_1.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"/>
<TextBlock Text="افزودن"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_add"
Content="افزودن"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--about us-->
<ListViewItem HorizontalAlignment="Left"
Style="{StaticResource lv_font}"
Margin="0,20,0,0"
Height="60"
MouseEnter="ListViewItem_MouseEnter"
>
<StackPanel Orientation="Horizontal"
Width="230"
Margin="-6,0,0,0"
Height="60"
>
<Image Source="/Assert/icons8_about_5.ico"
Stretch="None"
Margin="7,0,0,0"
VerticalAlignment="Center"
/>
<TextBlock Text="درباره ما"
Margin="50,0,0,0"
VerticalAlignment="Center"
/>
</StackPanel>
<!--tooltip-->
<ListViewItem.ToolTip>
<ToolTip x:Name="tt_about"
Content="درباره ما"
Style="{StaticResource tt_style}"/>
</ListViewItem.ToolTip>
</ListViewItem>
<!--style-mouse-over for list-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd1"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="Bd1"
Value="#B5C1B4"/>
<Setter Property="BorderBrush"
TargetName="Bd1"
Value="#B5C1B4"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
But it is not worked, I did not get any error but it is not changed the default color if you have any other idea or this code is wrong please tell me.
Thanks
i have three toggle buttons which use a singe style resource on wpf, now i cant set their content, content is declared more than once error, each toggle button has a different content.
Each toggle button uses an image as background also.
<UserControl.Resources>
<Style x:Key="Chromeless" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="197" Height="60">
<ContentPresenter TextElement.FontFamily="{TemplateBinding TextElement.FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="page1Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_1.png" Height="60" Width="197" />
<Image x:Key="page1" Source="/graph_engine;Component/cucaracha/LD3/button_1_pressed.png" Height="60" Width="197" />
<Image x:Key="page2Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_2.png" Height="60" Width="197" />
<Image x:Key="page2" Source="/graph_engine;Component/cucaracha/LD3/button_2_pressed.png" Height="60" Width="197" />
<Image x:Key="page3Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_3.png" Height="60" Width="197" />
<Image x:Key="page3" Source="/graph_engine;Component/cucaracha/LD3/button_3_pressed.png" Height="60" Width="197" />
</UserControl.Resources>
<Viewbox Stretch="Fill" StretchDirection="Both">
<Grid Height="60" Name="grid1" Width="591" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource Chromeless}" Name="page1" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page1_Checked" Unchecked="page1_Unchecked">
<DynamicResource ResourceKey="page1"/>
</ToggleButton>
<ToggleButton Grid.Column="1" Style="{StaticResource Chromeless}" Name="page2" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Unchecked="page2_Unchecked" Checked="page2_Checked">
<DynamicResource ResourceKey="page2"/>
</ToggleButton>
<ToggleButton Grid.Column="2" Style="{StaticResource Chromeless}" Name="page3" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page3_Checked" Unchecked="page3_Unchecked">
<DynamicResource ResourceKey="page3"/>
</ToggleButton>
</Grid>
</Viewbox>
Do you mean you can't change the image when you pressed down the toggle button? You only set a image to the content of toggle button. You can use Visual State Manager to change the background like this
If you just want to set the image and failed. Please check the image path.
Im trying to make exclamation mark next to the text for validation exception.
There is my custom template there is my XAML:
<Window x:Class="WpfApplicationLAB.NewGameWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplicationLAB"
mc:Ignorable="d"
Height="80" Width="260"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
AllowsTransparency="False"
Title="NewGameWindow"
ResizeMode="CanResize" MinWidth="180" MinHeight="90">
<Grid Name="GridInputName">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="29*"/>
<RowDefinition Height="28*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="51*"/>
<ColumnDefinition Width="121*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Content="Size:" HorizontalContentAlignment="Center"/>
<TextBox Name="textBox" Grid.Row="1" Grid.Column="1">
<TextBox.Text>
<Binding Path="Ssize" UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<local:SizeValidation/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<Button Name="Cancel"
Grid.Row="2" Grid.Column="0" Content="Cancel" Click="Cancel_Click" >
</Button>
<Button Name="Ok"
Grid.Row="2" Grid.Column="1" Content="Ok" Click="Ok_Click">
</Button>
</Grid>
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Border Background="Red" Margin="0,0,0,0" Width="20" Height="20" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white">
</TextBlock>
</Border>
<TextBlock
Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0,5,0" >
<AdornedElementPlaceholder Name="MyAdorner" ></AdornedElementPlaceholder>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
</Window>
I want the exclamation mark on the left side of the text, I can't reach it anyway i try, with stack panel and it's orientation changed, dock panels etc.
With this code it looks that:
in some different variables it can be on the left side of the textbox
Any tips?
Try to wrap the Border with Background="Red" and the TextBlock with Foreground="Red" in a StackPanel with Orientation="Horizontal".
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Border Background="Red"
Margin="0"
Width="20"
Height="20"
CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!"
VerticalAlignment="center"
HorizontalAlignment="center"
FontWeight="Bold"
Foreground="white"/>
</Border>
<TextBlock Margin="5,0,0,0"
Foreground="Red"
Text="{Binding ElementName=MyAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
</StackPanel>
<Border BorderBrush="Red" BorderThickness="1" Margin="5,0" >
<AdornedElementPlaceholder Name="MyAdorner"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This worked for me.
PS: did you realize that you wrote MinHeight="90"... and then Height="80"? Does it make sense for you?
I got a TabControl with two TabItems, I created a template for it.
<TabControl x:Name="MainInfoTabControl" Grid.Row="3" Grid.RowSpan="7" Grid.Column="0" Grid.ColumnSpan="2"
Background="{x:Null}"
BorderBrush="{x:Null}"
>
<TabControl.Resources>
<Style x:Key="TabHeaderStyle" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="FontWeight" Value="DemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="HeaderBorder" BorderBrush="White" BorderThickness="2" CornerRadius="10,10,0,0" >
<TextBlock Text="" VerticalAlignment="Center" Margin="5"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Main Details"
Margin="0.5, 0.5, 0, 0.5"
FontSize="15"
MinHeight="40" Width="200"
Style="{StaticResource TabHeaderStyle}"
>
</TabItem>
<TabItem Header="Pets Owned"
Margin="0.5, 0.5, 0, 0.5"
FontSize="15"
MinHeight="40" Width="200"
Style="{StaticResource TabHeaderStyle}"
>
</TabItem>
</TabControl>
The problem is the tabItem's Header doesn't show up. In my template there is a TextBlock but i couldn't customize the TextBlock.Text dynamically (atleast bind or somewhat change the Text property during run time)
TabItem1 should be "Owner Details" while TabItem2 should be "Pets Owned"
You override default tabitem template you need to get somehow to parent's value.
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}"
VerticalAlignment="Center"
Margin="5">
</TextBlock>
or
<TextBlock Text="{TemplateBinding Property=Header}"
VerticalAlignment="Center"
Margin="5">
</TextBlock>
I have a problem, that I can not set the background color of my ListBox-Control. I create a ItemsControl template and DataTemplates:
<Style TargetType="ItemsControl" x:Key="LogViewerStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<ScrollViewer CanContentScroll="True">
<ItemsPresenter SnapsToDevicePixels="True" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<DataTemplate DataType="{x:Type local:LogEntry}">
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Index" Width="Auto"/>
<ColumnDefinition SharedSizeGroup="Date" Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Index}" Grid.Column="0" FontWeight="Normal" Margin="2,0,2,0" Foreground="{Binding Path=LineNumbersColor, ElementName=LogViewerProperty}" Cursor="RightArrow.cur" TextAlignment="Right" />
<TextBlock Text="{Binding DateTime}" Grid.Column="1" FontWeight="Bold" Margin="0,0,5,0" />
<TextBlock Text="{Binding Message}" Grid.Column="2" TextWrapping="{Binding Path=WordWrapping, ElementName=LogViewerProperty, Converter={StaticResource BoolToTextWrap}}" />
</Grid>
</DataTemplate>
When I try to give my ListBox a BackgroundColor nothing happens:
<ListBox ItemsSource="{Binding}" x:Name="LogViewer" Background="Cornsilk" Style="{StaticResource LogViewerStyle}">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer CanContentScroll="True" Padding="{TemplateBinding Padding}" HorizontalScrollBarVisibility="{Binding Path=WordWrapping, ElementName=LogViewerProperty, Converter={StaticResource BoolToScrollbarVisibility}}" VerticalScrollBarVisibility="{Binding Path=VerticalScrollbarVisible, ElementName=LogViewerProperty}">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True">
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
At the moment I don't have clue why. Can anybody give me a hint? Thanks!
You apply a style to ListBox with the key LogViewerStyle which futhermore defines a template but then you create another template for ListBox implicitly.
Why? That is not wpf's usual bread. Its not making sence, is it?
Remove one of them please.
Though to answer your question you will have to tell your ScrollViewer to listen to the Background of the ListBox.
Take a look at this:
<Style TargetType="ListBox" x:Key="MyListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="{TemplateBinding Background}">
<ScrollViewer CanContentScroll="True">
<ItemsPresenter SnapsToDevicePixels="True" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
And then just set the style on the ListBox.
<ListBox Style="{StaticResource MyListBox}" />
Take a look how it tells Grid to have its Background same as ListBox will have.
Setting Background="{TemplateBinding Background}" applies background for me
<ListBox ItemsSource="{Binding}" Width="100" x:Name="LogViewer" Background="Red" Style="{StaticResource LogViewerStyle}">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer CanContentScroll="True" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" HorizontalScrollBarVisibility="{Binding Path=WordWrapping, ElementName=LogViewerProperty, Converter={StaticResource BoolToScrollbarVisibility}}" VerticalScrollBarVisibility="{Binding Path=VerticalScrollbarVisible, ElementName=LogViewerProperty}">
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True">
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>