I've created a custom WPF user control. The problem is, that sometimes I need a BorderThickness of 0 and sometimes a BorderThickness of 1.
<UserControl ...>
<clay:TextBox x:Name="ClayTextBox"
BorderThickness="1" >
</clay:TextBox>
</UserControl>
If I'm using the control in a xaml document like this:
<clay:TextBox x:Name="ClayTextBox"
BorderThickness="0" >
</clay:TextBox>
... the Border is always 1. How can I solve that?
In your custom control template style, you should set the parent container control as border and then use template binding to bind the border thickness. Here I've assumed that your CustomControl inherits a control that has BorderThickness as a property.
<ControlTemplate TargetType="{x:Type clay:TextBox}">
<Border BorderThickness="{TemplateBinding BorderThickness}">
//Remaining xaml that makes up your custom control.
</Border>
</ControlTemplate>
Have your border Bind its BorderThickness propety to the UserControls one like this:
<UserControl x:Class="UseRcontrolWithProperty.UserControl1"
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" x:Name="this"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Border BorderThickness="{Binding ElementName=this, Path=BorderThickness}"></Border>
</Grid>
</UserControl>
that way changing the BorderBrush on the UserControl will change the border brush of the internal border.
Related
I want to create a new UserControl and reroute the Background property to use it elsewhere than in the UserControl.Background property (like it is done on the checkbox for example).
Here is a simple custom usercontrol:
<UserControl 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"
xmlns:local="clr-namespace:Controls"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
x:Class="Controls.HexagonalTile"
mc:Ignorable="d" d:DesignWidth="300" d:DesignHeight="300">
<Grid>
<ed:RegularPolygon Fill="{Binding ElementName=LayoutRoot, Path=Background}" StrokeThickness="5" Stroke="Black"/>
</Grid>
And I want to use it like this:
<Controls:HexagonalTile HorizontalAlignment="Left" Height="100" Width="100" Background="Aqua" />
But when I do this, the corner of my user control, outside of the hexagone, take the background color too. I want them to stay transparent.
Thank's for your help.
The reason why this is happening is because the default ControlTemplate for a UserControl has a Border with a TemplateBinding to the Background property.
However, you can re-template the control like this to achieve your goal:
<UserControl x:Class="WpfApp4.HexagonalTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">
<UserControl.Template>
<ControlTemplate TargetType="{x:Type UserControl}">
<Grid>
<ContentPresenter />
</Grid>
</ControlTemplate>
</UserControl.Template>
<Grid>
<ed:RegularPolygon
Fill="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
Stroke="Black"
StrokeThickness="5" />
</Grid>
</UserControl>
I hope this helps!
In UWP I have created CustomTextBox which is derived from TextBox control. In my CustomTextBox, I have used various properties but some properties are working and some are not working.
Below properties are working fine,
Width Height BorderBrush, etc,.
Below properties are not working,
Header Text, etc,. Please find code snippet on below,
MyTextBox.cs
public sealed class MyTextBox : TextBox
{
public MyTextBox()
{
this.DefaultStyleKey = typeof(MyTextBox);
}
}
Generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SfMaskedEdit_header">
<Style TargetType="local:MyTextBox" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyTextBox">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainPage.xaml
<Page
x:Class="SfMaskedEdit_header.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SfMaskedEdit_header"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="grid1">
<local:MyTextBox x:Name="myTextBox" Text="Hello" Header="MyTextBox" Width="200" Height="40"
BorderBrush="Blue" BorderThickness="2" Background="Pink"/>
</Grid>
</Page>
Please use the below sample for further information,
Sample: MyTextBox
The reason is that you have overridden the default template and hence removed all the elements that normally make up a TextBox.
To understand this, it is important to make it clear that UWP controls usually just provide a behavior, but are themselves made up of multiple other controls in their template (the terminology is usually that XAML controls are look-less by default). And these controls are providing the visual representation of the control. For example, in the case of TextBox, the template is made up of Border for the borders around it, TextBlock for the placeholder text, Button for clearing out the content, a ScrollViewer where the Text input is rendered and a ContentPresenter for the header and so on.
Your custom TextBox is in fact just the Border itself, which means you have essentially lost the capabilities you mentioned because there are no controls to surface them visually.
To fix your problem, I suggest starting with the default TextBox template (by copying and pasting it to your own style. And then just editing the parts that you want to change. This way you will start from the fully functional state and can decide what to change while retaining the capabilities of the control.
You can find the default template in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\{version}\Generic\generic.xaml. You can search for <Style TargetType="TextBox"> to find the default TextBox style and template.
Simple code:
<UserControl x:Class="MonitravLite.UserControls.Foo"
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"
xmlns:local="clr-namespace:MonitravLite.UserControls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<!-- 1st example with setting background -->
<Grid Background="Blue" Opacity="0.5">
<TextBlock Text="Grid background"/>
</Grid>
<!-- 2nd example with grid on top-->
<Grid>
<TextBlock Text="Grid on top"/>
<Grid Background="Blue" Opacity="0.5"/>
</Grid>
</StackPanel>
I have various child controls that display states. When any of these children are in a error state, I want the background of the of the container to change color. e.g..e. if one of the children is in an error state, the background should be red.
However if I set the container background (grid in this example), it washes out the children.
If I do the second approach and lay a grid over the top - this doesn't happen?
I have tried setting the Panel.Zindex, but this doesn't help.
What am I missing to make the first example render like the second?
if you set the opacity of the grid all its children will inherit this property and become transparent as well! So instead of making the grid transparent choose a transparent color as a background.
instead of this line:
<Grid Background="Blue" Opacity="0.5">
try this:
<Grid Background="#7f0000FF">
I have a very simple dockpanel inside a border. But the dock panel seems to have a 1px margin on the right and bottom. I cant seem to get rid of it by setting the margin or the dockpanel nor by setting the padding of the border.
What exactly is causing it and how can I fix it without hacking it (I.E. negative margin on the dock panel)
<Window x:Class="WPFTest.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"
mc:Ignorable="d"
Height="350" Width="525">
<Grid>
<Border BorderBrush="Black" BorderThickness="2" Padding="0">
<DockPanel Background="Blue" Margin="0"/>
</Border>
</Grid>
</Window>
No style defined on Border or DockPanel. Tried this on a brand new project and still seeing the white lines
The usual way you get gaps like that in XAML is becasue the UI is being scaled. If you can't find anything that might be scaling it (RenderTransform in a parent, OS settings such as font size, probably other stuff), you could try playing with UseLayoutRounding and SnapsToDevicePixels.
I need to create a custom control similar to WPF GroupBox. I started from the standard WPF Custom Control Library template in VS 2015 and defined my CustomGroupBox control like this:
public class CustomGroupBox : ContentControl
{
static CustomGroupBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomGroupBox), new FrameworkPropertyMetadata(typeof(CustomGroupBox)));
}
}
Then added the following minimal set of lines to develop my custom GroupBox according to the specification:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomGroupBox">
<Style TargetType="{x:Type local:CustomGroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomGroupBox}">
<Border Background="{TemplateBinding Background}"
BorderBrush="Gray" BorderThickness="3" CornerRadius="3">
<ContentControl />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
To debug and develop, I created a test form for my custom control:
<Window x:Class="CustomGroupBoxClient.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:CustomGroupBoxClient"
xmlns:ctrl="clr-namespace:CustomGroupBox;assembly=CustomGroupBox"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ctrl:CustomGroupBox Margin="5">
<StackPanel Orientation="Vertical">
<TextBlock>Text Block #1</TextBlock>
<TextBlock>Text Block #2</TextBlock>
</StackPanel>
</ctrl:CustomGroupBox>
</Grid>
</Window>
However, when I launch this form, I see the border of my custom control but not the content (2 TextBlock's):
I've re-read many manuals and articles related to this topic, but still can't figure out why ContentControl in my ControlTemplate does not display the specified content. How to solve my problem?
Try using ContentPresenter instead of ContentControl in your template:
<ContentPresenter />
By default, ContentPresenter finds the Content property of its templated parent and displays whatever it finds there. You could change the name of the property it looks for by changing its ContentSource value...
<ContentPresenter ContentSource="FooBar" />
...but since you're inheriting from ContentControl, the default is probably what you want.