Removing textbox focus border but keeping original in wpf - c#

this is my first time using WPF and I want to know how I can remove the focus border because it is overlapping my current border? I have a white border (bottom only) and I want that to stay.. but I don't want a blue border on selecting the textbox because it overlaps my text box's current border, how can I solve this?
<Window ResizeMode="NoResize" x:Name="Sahara" x:Class="Sahara.MainWindow"
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:Sahara"
mc:Ignorable="d"
Title="Sahara" Height="499.75" Width="696.525" Background="White" Topmost="True" Icon="C:\Users\ashle\Downloads\Seanau-Support-Bubble-Support-Bubble-1.ico">
<Grid x:Name="Sahara1" Background="#FF6F5499">
<Label x:Name="label" Content="Sign In" HorizontalAlignment="Left" Margin="283,93,0,0" VerticalAlignment="Top" FontSize="29.333" Foreground="White" FontFamily="Verdana Pro Light"/>
<TextBox x:Name="loginUsernameText" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,177,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" BorderThickness="0,0,0,1" BorderBrush="White" FontStyle="Italic" TextChanged="loginUsernameText_TextChanged"/>
<PasswordBox x:Name="loginPasswordText" PasswordChar="•" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="30" Margin="216,213,0,0" VerticalAlignment="Top" Width="260" Background="#FF926FB4" Foreground="White" FontFamily="Arial" FontSize="16" BorderThickness="0,0,0,1" BorderBrush="White"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="216,261,0,0" VerticalAlignment="Top" Width="260" Height="30" Background="White" Foreground="#FF6F5499"/>
</Grid>
</Window>

You will need to create ControlTemplate for your TextBox
something like this
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<DockPanel>
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<DockPanel>
<ScrollViewer HorizontalAlignment="Stretch" x:Name="PART_ContentHost"/>
</DockPanel>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

Related

How can I change the position of the default "grip" in WPF

I would like to use the basic grip. but I don't see where I could change its position. Now if you look my picture you can see I disabled the borders and gave some shadows to the main rectangle. I would like to keep it that way.
I wonder if there is a simple modification next to this "ResizeMode="CanResizeWithGrip"
Code:
<Window x:Class="Serenity.MainWindow"
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:Serenity"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1100" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" MinWidth="720" MinHeight="480" Icon="Images/CloseBlack.png" ResizeMode="CanResizeWithGrip">
<Grid>
<Rectangle x:Name="MainTable" Fill="#FF1A1A1A" Margin="10" Stroke="Black" StrokeThickness="1.0">
<Rectangle.Effect>
<DropShadowEffect x:Name="Shadow" BlurRadius="13" ShadowDepth="0" Color="Black"/>
</Rectangle.Effect>
</Rectangle>
<Button x:Name="Website" Content="Google" Margin="0,0,38,38" Click="button_Click" Background="#FF48484A" BorderBrush="{x:Null}" Foreground="White" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" AutomationProperties.HelpText="You will close the program." Height="28" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="99"/>
<Rectangle x:Name="TitleBar" Fill="#FF2D2D30" Height="43" Margin="10,10,10,0" Stroke="Black" VerticalAlignment="Top" MouseDown="TitleBar_MouseDown"/>
<Button x:Name="CloseB" Content="Exit" Margin="0,18,19,0" BorderBrush="{x:Null}" Foreground="White" HorizontalAlignment="Right" Width="50" Height="24" VerticalAlignment="Top" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" RenderTransformOrigin="-0.25,1.45" Click="CloseB_Click" Background="#FF48484A" OpacityMask="Black" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</Grid>
I have tried and succeeded
<Style TargetType="{x:Type ResizeGrip}">
<Setter Property="Margin" Value="25"/>
</Style>

Positioning texblocks in control template

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?

Button content not displaying when using Control Template as Button Template WPF

So I have a circular button I have created in wpf like so:
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
But the button it displays is:
Why has the red X not appeared in the center of my button? and is it possible to change my xaml such that the red X will appear.
(ps. the grey background is because of my button style in my resources)
It's because there's nothing in your Template to display that Content. For that you need to use ContentPresenter
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
you'll also need to add TargetType="{x:Type Button}" to ControlTemplate

How to add a usercontrol wpf window as status bar at the top of my windows used in my application when it get focus

I am writing an application in which i need to implement a window at the top of all my window how can i do help me the window to be added is an usercontrol .how to add when the window gets focused i need to add this usercontrol window to it,
I wrote window loaded event for all the windows but its not fine .need some help
instead of adding it in wpf XAML code .
this is the common usercontrol code which comes in all windows.
<UserControl x:Class="Cutting_Machine.CutMACStatus"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="70" d:DesignWidth="800" Background="SteelBlue">
<Grid>
<Label />
<Label Name="lblstatus" VerticalAlignment="Center" FontSize="22" Margin="5,0,560,42" HorizontalContentAlignment="Left" Foreground="Yellow" FontWeight="ExtraBold" Height="38">HOME</Label>
<Label Margin="10,43,635,10" FontSize="14" FontWeight="SemiBold" Foreground="Yellow" Name="lbldate"/>
<Label Margin="245,10,392,0" Name="lblposition" Foreground="Yellow" FontSize="36" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontWeight="ExtraBlack" Height="54" VerticalAlignment="Top" >1027.00</Label>
<Label Margin="0,22,298,10" HorizontalAlignment="Right" Width="80" Name="lblunits" BorderBrush="Black" Foreground="Yellow" FontWeight="Bold" HorizontalContentAlignment="Left" FontSize="24" VerticalContentAlignment="Top">mm</Label>
<Label Margin="554,10,133,37" FontSize="24" FontWeight="Bold" Foreground="Yellow" Name="lblmodel" ></Label>
<Label Background="ForestGreen" Margin="554,53,218,6" FontSize="10" FontWeight="SemiBold" Foreground="White" Name="lblhw">HW</Label>
<Label FontSize="16" FontWeight="SemiBold" Foreground="Yellow" Margin="596,43,133,0" Name="lblcuts">Cuts</Label>
<Label Background="SteelBlue" FontSize="18" FontWeight="SemiBold" Foreground="Yellow" Margin="674,10,70,5">Knife</Label>
<Label Background="SteelBlue" FontSize="18" FontWeight="SemiBold" Foreground="Yellow" Margin="737,10,10,5" Name="lblhelp">Help</Label>
</Grid>
</UserControl>
i want this ui to be added to all windows when the windows got focus.
With so far I understand from your question you want this control to appear on all of your windows when active
so start by defining a style in App.xaml
<Application x:Class="Cutting_Machine.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="CutMACStatusStyle"
TargetType="{x:Type Window}"
BasedOn="{StaticResource {x:Type Window}}"
xmlns:cm="clr-namespace:Cutting_Machine">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Window">
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<cm:CutMACStatus Visibility="{TemplateBinding IsActive, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Border Grid.Row="1"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}">
<ContentPresenter />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Application.Resources>
</Application>
the trick is to create a template with the status in a grid on top and actual content of the window at bottom
then all those window you want to have this header you specify style attribute for the same
<Window x:Class="Cutting_Machine.MainWindow"
Title="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Style="{StaticResource CutMACStatusStyle}">
this will show the user control on top of the window whenever the window is active
result
active window
inactive window

How to remove default chrome from a WPF ToggleButton

I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>
Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>
Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>

Categories