Here is a test app that just shows a hatched ellipse in a window. No matter how I write it, the background of the ellipse is transparent; not the color I'm setting the GeometryDrawing. I'm stumped. The resulting picture shows the background of the ellipse as transparent when it should be Green.
<Window x:Class="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:local="clr-namespace:WpfApp2"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Background="Red"
mc:Ignorable="d">
<Window.Resources>
<ResourceDictionary>
<DrawingBrush x:Key="HatchBrush"
Stretch="UniformToFill"
TileMode="Tile"
Viewbox="0 0 10 10"
ViewboxUnits="Absolute"
Viewport="0 0 10 10"
ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Green">
<GeometryDrawing.Geometry>
<GeometryGroup>
<LineGeometry StartPoint="0 0"
EndPoint="10 0" />
<LineGeometry StartPoint="0 0"
EndPoint="0 10" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Yellow"
EndLineCap="Square"
StartLineCap="Square"
Thickness="3" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Ellipse x:Name="c_Ellipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{StaticResource HatchBrush}"
Stroke="Black" />
</Grid>
</Window>
This is what I get:
The background of the ellipse should be Green:
<GeometryDrawing Brush="Green">
There is no filled geometry that uses the GeometryDrawing's Brush.
You may use a RectangleGeometry instead of two LineGeometries:
<GeometryDrawing Brush="Green">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,10,10"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Yellow" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
Related
This question already has answers here:
Content of a Button Style appears only in one Button instance
(3 answers)
Closed 4 years ago.
Icons in my application are stored as geometry drawings in a resource dicitony. for example:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="ViewboxIconClose"
Width="16"
Height="16">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1M9.4141,8L13.9571,12.543 12.5431,13.957 8.0001,9.414 3.4571,13.957 2.0431,12.543 6.5861,8 2.0431,3.457 3.4571,2.043 8.0001,6.586 12.5431,2.043 13.9571,3.457z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
This icon is used like this:
<Button>
<StaticResource ResourceKey="ViewboxIconClose" />
</Button>
Now my Problem:
if i use this geometry somewhere else, it will only work at one place. for example if i use this geometry in a menu, the geometry on the button will disapear in the moment, i open the menu.
You could use x:Shared=false to solve this but I'd probably use a style and an image instead. The image should be more efficient than a rectangle with a brush and a viewbox.
Title="MainWindow" Height="350" Width="525"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
>
<Window.Resources>
<Style x:Key="CloseIcon" TargetType="Image">
<Setter Property="Stretch" Value="Uniform"/>
<Setter Property="Source">
<Setter.Value>
<DrawingImage PresentationOptions:Freeze="True">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1M9.4141,8L13.9571,12.543 12.5431,13.957 8.0001,9.414 3.4571,13.957 2.0431,12.543 6.5861,8 2.0431,3.457 3.4571,2.043 8.0001,6.586 12.5431,2.043 13.9571,3.457z" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<Grid Height="100" Width="100" Background="Red">
<Image Style="{StaticResource CloseIcon}"/>
</Grid>
<Grid Height="30" Width="30" Background="Blue">
<Image Style="{StaticResource CloseIcon}"/>
</Grid>
</StackPanel>
</Grid>
With this specific requirement you could just use one geometry as data for a path. Geometries aren't visuals.
I would like to draw circular geometry in VisualBrush (in order to create an OpacityMask), the result however are of rather low quality:
This image is 500% zoomed in but the cut off of the circle is apparent (especially on top and bottom) and even at original size the mask is rather blurry. The image was generated with following code:
<Border Background="Blue">
<Border.OpacityMask>
<VisualBrush TileMode="None" Stretch="Uniform" AlignmentX="Center" AlignmentY="Center">
<VisualBrush.Visual>
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="0,0" RadiusX="1" RadiusY="1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
</Border>
How can I fix the mask so that is neither blurry nor cut off?
This may be better. At least it is simpler.
<Border Background="Blue">
<Border.OpacityMask>
<DrawingBrush Stretch="Uniform" AlignmentX="Center" AlignmentY="Center">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="1" RadiusY="1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.OpacityMask>
</Border>
The XAML that I have in my question was taken directly from this question on SO. It's simply XAML that creates a tiled DrawingBrush to render rectangles (squares in my case) against the background of a canvas. My problem is that this XAML only works when I set the Width and Height of the Canvas to anything other than "Auto". But when I set the Width and Height of canvasMain to Auto then no squares are drawn on the background.
How can I have my Width and Height set to "Auto" and also have the DrawingBrush render the squares on my canvas?
Here is my XAML:
<Window.Resources>
<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile"
Viewport="0,0 20,20" ViewportUnits="Absolute">
<!-- ^^^^^^^^^^^ set the size of the tile-->
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<!-- draw a single X -->
<GeometryGroup>
<!-- top-left to top-right -->
<LineGeometry StartPoint="0,0" EndPoint="20,0" />
<!-- top-left to bottom-left -->
<LineGeometry StartPoint="0,0" EndPoint="0,20" />
<!-- bottom-left to bottom-right -->
<LineGeometry StartPoint="0,20" EndPoint="20,20" />
<!-- top-right to bottom-right -->
<LineGeometry StartPoint="20,0" EndPoint="20,20" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<!-- set color and thickness of lines -->
<Pen Thickness="1" Brush="Silver" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top">
<DrawingBrush.Transform>
<!-- set the left and top offsets -->
<TranslateTransform X="0" Y="0" />
</DrawingBrush.Transform>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource GridTile}" >
<GeometryDrawing.Geometry>
<!-- set the width and height filled with the tile from the origin -->
<RectangleGeometry Rect="0,0 160,160" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Canvas Name="canvasMain" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="Auto" Height="Auto" Background="{StaticResource OffsetGrid}"></Canvas>
Try changing the alignments:
<Canvas Name="canvasMain" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{StaticResource OffsetGrid}"></Canvas>
I need to write a control, which will look like this:
Click Here to se callout
Problem is that i cant get label's real size to redraw my rectangle geometry. Label's height is always much bigger then space that it really occupies on the screen. I dont know, what to. Here is code:
<Popup x:Class="Controls.Callout"
x:ClassModifier="internal"
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" >
<Grid>
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing >
<GeometryDrawing Brush="Orange" x:Name="geometryDrawing">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="2"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry x:Name="rectangel"
RadiusX="15" RadiusY="15"
Rect="0,30, 300,100"
/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry>
<PathFigure StartPoint="30,30" IsClosed="False">
<PolyLineSegment Points="15,0, 90,30"/>
</PathFigure>
</PathGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Label Padding="5 20" MaxWidth="300" Name="myLabel" FontSize="16" >
<!--Content="{Binding}">-->
<!--MaxHeight="100" MaxWidth="300">-->
<AccessText TextWrapping="Wrap" MaxHeight="50"/>
</Label>
</Grid>
</Popup>
Code behind:
internal partial class Callout : Popup
{
public Callout()
{
InitializeComponent();
}
protected override void OnOpened(System.EventArgs e)
{
rectangel = new RectangleGeometry(new Rect(0,30,300, myLabel.Height/2));
}
}
Why not use a Grid with a Rectangle with rounded corners, a TextBlock, and some shape on top of the rectangle to make the callout "pointer"? As a Grid, the rectangle can automatically expand to the full size needed by the TextBlock.
For example, you can create a UserControl (or a full-fledged templated control) and given it a MaxWidth so that the text wraps. Then put the control in a Canvas so that it can determine its own size.
<UserControl MaxWidth="200">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="1" RadiusX="50" RadiusY="50"
StrokeThickness="8" Stroke="Gray" />
<!-- Here will be pointer in Grid.Row="0"-->
<TextBlock Grid.Row="1" Name="myLabel" Margin="20" Foreground="Black"
Text="This is the textblock....." FontSize="20" TextWrapping="Wrap" />
</Grid>
</UserControl>
Is there a way in WPF when two shape objects overlap each other that the overlapping portions of the object get painted in a different brush?
Worked it out.
You can use a geometry drawing containing a GeometryGroup with a fill rule of EvenOdd. This paints any overlapping items in white. Then just put another image over the top with CombinedGeometry containing the same objects as the Geometry group with a GeometryCombineMode of Intersect and that will highlight the intersect in your custom brush. The sample code is below:
<Grid>
<Image Stretch="None">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="3" />
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<GeometryGroup FillRule="EvenOdd">
<EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
<EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="None">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="LightBlue">
<GeometryDrawing.Geometry>
<CombinedGeometry GeometryCombineMode="Intersect">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Grid>
Thanks!