I want to attach a DropShadowEffect on a Border control. I see it on runtime but not in the designer.
<Grid>
<Border Background="LightGray"
BorderBrush="DarkGray"
BorderThickness="1"
ClipToBounds="True"
Width="400"
Height="100">
<Border Background="Transparent"
BorderBrush="Black"
BorderThickness="0,10,0,0"
Margin="0,-11,0,0">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"/>
</Border.Effect>
</Border>
</Border>
</Grid>
It's quite annoying, especially if working on custom control library.
The former and now apparently obsolete DropShadowBitmapEffect works on run- and designtime.
Edit:
This not a duplicate of other questions like Here as it is quite the opposite problem. The shadow effect appears at runtime, but not in the designer. Just try it out with NET-Framework WPF Project and the code above.
Related
I have created an extended button with 2 different border styles invoked by triggers in XAML. Both share the same contentpesenter but after changing the border style more than twice the content in the contentpresenter fails to display.
Below is a link to the entire project with a test bed application that demonstrates the issue, I think the issue is somewhere in the XAML below but I cannot see why it breaks:
Sample Button App
<Style.Resources>
<ContentPresenter x:Key="ButtonContent" Margin="5" HorizontalAlignment="Center"
Content="{Binding Content}"/>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Margin="{Binding KeyMargin}">
<Grid Visibility="{Binding RectangleVisibility}">
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=rectBorder}" />
</Grid.OpacityMask>
<Border x:Name="rectBorder"
CornerRadius="{Binding BorderCorners}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{Binding BorderThickness}"/>
<Viewbox Stretch="Fill"
StretchDirection="Both">
<ContentControl Content="{StaticResource ButtonContent}"/>
</Viewbox>
</Grid>
<Grid Visibility="{Binding EllipseVisibility}">
<Ellipse Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{Binding BorderThickness}"
Fill="{TemplateBinding Background}">
</Ellipse>
<Viewbox Stretch="Fill"
StretchDirection="Both">
<ContentControl Content="{StaticResource ButtonContent}"/>
</Viewbox>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
The problem is most likely that you cannot have the same element (the ContentPresenter in this case) in more than one place in the visual tree, and in which one of the two grids it ends up is undefined, i.e., an implementation archetype of WPF.
To get the element duplicated this might work:
<ContentControl Content="{TemplateBinding Content}"/>
or in your case
<ContentControl Content="{TemplateBinding Content}" Margin="5" HorizontalAlignment="Center"/>
instead of a static resource. The <ContentPresenter/> syntax is pretty much an optimized shortcut for that (or you could set x:Shared="False" on the resource, but having a ContentPresenter as a static resource is as far as I know not how it is intended to be used)
If the Button content is a UIElement itself though, it will be used directly itself in the visual tree, i.e., twice and this wont work either. A better solution would be to just have the content once in the control template and change the visual appearance around it, e.g., using a trigger to set the Grid's OpacityMask.
Another remark is that your control template is very tightly bound to where the Button is used, with direct bindings to the current data context, which reduces its reusability. Some easy fixes is to use TemplateBinding instead of Binding for BorderThickness respectively Margin (instead of KeyMargin), since those are existing properties of the Button.
For better reusability and cleaner code you should consider looking into creating a custom control deriving from Button with dependency properties for BorderCorners, the desired visual state (ellipse vs rectangle) etc. You might also want to use triggers to get the mouse-over effects of the button etc. Have fun control templating!
I have a strange bug here. CheckBox controls has always been squared. Now I've noticed that it's not. It's one pixel wider than tall. After experimenting a bit with empty WPF applications, I've discovered that it depends on the UseLayoutRounding setting. If it's set to false, the CheckBox is never a square. If it's set to true, it depends on the actual layout values and how they are rounded, or snapped to pixels.
Just create an empty WPF application targeting .NET Framework 4.5.2, 4.6 or 4.6.1 (I've tested these) and run it on Windows 10. Here's the minimal XAML to reproduce. The third state shows another filled "square" box that makes it easier to recognise the form without measuring pixels.
<Window
x:Class="CheckBoxTest.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" UseLayoutRounding="False">
<Grid>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" IsThreeState="True" IsChecked="{x:Null}"/>
</Grid>
</Window>
Then drag the window's width and watch the CheckBox as it toggles between square and one pixel wider. In another of my applications it's always one pixel wider and never has a squared form.
Is that a bug in WPF? Does it only happen on Windows 10?
PS: Better not use a high DPI monitor for this, it may be harder to see there.
Its a bug in the default style of the checkbox. For some reason they decided to not use layout rounding on the grid in the checkbox control template.
<Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" UseLayoutRounding="True">
<Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
<Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
</Grid>
</Border>
Maybe because even if you modify the template like this, it still inchworms when you resize it in the designer, but not when you run it.
I've a Silverlight app (Silverlight 4 in VS2010) wherein I've a datagrid. I wanted to set the border for the datagrid rows. So in the <DataTemplate> I wrote this:
<Border BorderBrush="Black" BorderThickness="1"></Border>
This worked. Now I wanted to draw border only in the bottom and right and I did this:
<Border BorderBrush="Black">
<Border.BorderThickness>
<Thickness Bottom="1" Left="0" Top="0" Right="1"/>
</Border.BorderThickness>
</Border>
But this throws a XAML parsing error - Cannot set the read-only property Bottom
Why would this happen? Is there any alternatives to do the same?
<Border BorderBrush="Black" BorderThickness="0,0,1,1" />
I am using a canvas with an Expander embedded within it, so that when the expander is expanded, it will overlay the controls below.
<Canvas Grid.Row="0" Panel.ZIndex="99">
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
</Canvas>
<OtherControls Grid.Row="1"/> etc
Instead of setting the size of the canvas, is there a way to allow the user to drag size it instead?
here's a thought: Put everything in the grid. Let the grid resize itself automatically, put canvas in the grid (make sure it takes up the whole grid) so that it will follow the parent's size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
<OtherControls Grid.Row="1"/>
</Grid>
not sure how relevant this might be, but check out this post. Maybe it'll give you some ideas (I wrote that 4 years ago, way too long to remember specifics, but code compiles and runs):
http://denismorozov.blogspot.com/2008/01/how-to-resize-wpf-controls-at-runtime.html
Is there a way to put a clipping path on an ImageBrush in Silverlight (not an Image)? I don't see it available from Intellisense, but I'm wondering if there may be a way to do this.
Yet another unpopular "No" answer. The answer is: there is isn't a way to do this.
One possible work around if its vital to create such a brush might be to use a WriteableBitmap. Render an Image using the original source plus the Clip onto a WriteableBitmap then use it as the source to an ImageBrush.
Maybe this will help
I had a problem with an ImageBrush and a Border with a CornerRadius. I couldn't get the Image to fill/clip to fit. I resolved it by moving the ImageBrush to the content of the Border.
Here's the original with the problem:
<Border CornerRadius="0,0,4,4" BorderThickness="0">
<Border.Background>
<ImageBrush ImageSource="/SLTest;component/Resources/background_image.png" Opacity="1" Stretch="UniformToFill" />
</Border.Background>
<ListBox x:Name="lbiMesages"
Opacity="1" BorderThickness="0"
IsHitTestVisible="False"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
>
Here's the working version:
<ListBox x:Name="lbiMessages"
Opacity="1" BorderThickness="0"
IsHitTestVisible="False"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="0,0,4,4" BorderThickness="0">
<Border.Background>
<ImageBrush ImageSource="/SLTest;component/Resources/background_image.png" Opacity="1" Stretch="UniformToFill" />
</Border.Background>
...
</Border>
</ControlTemplate>