Gu.Wpf.Geometry

Small library with WPF geometries and shaders.

Contents

• Geometries
  • Balloon
  • BoxBalloon - Simple - ConnectorAngle - ConnectorOffset - With PlacementTarget - PlacementTarget - PlacementOptions
  • EllipseBalloon
  • GradientPath
• Controls
  • Zoombox
• Effects
  • DesaturateEffect
  • FadeEffect
  • MaskEffect
  • AngularGradientEffect
  • HsvWheelEffect
  • HslWheelEffect

Geometries

Balloon

A ContentControlfor showing balloons.

Note: WPF Popup clips to bounds so the connector will be clipped when used in a popup.

<geometry:Balloon Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ConnectorAngle="25"
CornerRadius="15"
PlacementOptions="Bottom, Center"
PlacementTarget="{Binding ElementName=Target}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text, ElementName=TextBox}" />
<UniformGrid Grid.Row="1"
Rows="1">
<Ellipse Width="20"
Height="20"
Fill="Blue" />
<Ellipse Width="20"
Height="20"
Fill="Yellow" />
<Ellipse Width="20"
Height="20"
Fill="Red" />
</UniformGrid>
</Grid>
</geometry:Balloon>

BoxBalloon

Draws a border with a connector. Note: the connector is drawn outside the bounds of the element.

Simple

<geometry:BoxBalloon Grid.Row="1"
Grid.Column="1"ConnectorAngle="45"ConnectorOffset="-10,-0"CornerRadius="10"Stroke="CornflowerBlue"StrokeThickness="4" />

ConnectorAngle

ConnectorOffset

With PlacementTarget

<Canvas>
<Grid>
<Grid.RowDefinitions>
<RowDefinitionHeight="100" />
<RowDefinitionHeight="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBoxx:Name="Placements"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="2"SelectedIndex="0">
<geometry:PlacementOptions>Auto</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Center 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Top</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Bottom</geometry:PlacementOptions>
</ListBox>
<geometry:BoxBalloon Grid.Row="1"
Grid.Column="1"Margin="6"ConnectorAngle="45"CornerRadius="10"PlacementOptions="{Binding SelectedItem, ElementName=Placements}"PlacementTarget="{Binding ElementName=Target}"Stroke="HotPink"StrokeThickness="4" />
</Grid>
<Rectanglex:Name="Target"
Canvas.Left="100"
Canvas.Top="50"Width="100"Height="10"Fill="Gainsboro"MouseLeftButtonDown="OnTargetMouseLeftDown" />
</Canvas>

With PlacementRectangle

<Canvas>
<Grid>
<Grid.RowDefinitions>
<RowDefinitionHeight="100" />
<RowDefinitionHeight="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBoxx:Name="Placements"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="2"SelectedIndex="0">
<geometry:PlacementOptions>Auto</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Center 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Top</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Bottom</geometry:PlacementOptions>
</ListBox>
<geometry:BoxBalloon Grid.Row="1"
Grid.Column="1"Margin="6"ConnectorAngle="45"CornerRadius="10"PlacementOptions="{Binding SelectedItem, ElementName=Placements}"PlacementRectangle="100, 50, 100, 10"Stroke="HotPink"StrokeThickness="4" />
</Grid>
<Rectanglex:Name="Target"
Canvas.Left="100"
Canvas.Top="50"Width="100"Height="10"Fill="Gainsboro"MouseLeftButtonDown="OnTargetMouseLeftDown" />
</Canvas>

With PlacementRectangle and PlacementTarget

<Canvas>
<Grid>
<Grid.RowDefinitions>
<RowDefinitionHeight="100" />
<RowDefinitionHeight="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinitionWidth="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBoxx:Name="Placements"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="2"SelectedIndex="0">
<geometry:PlacementOptions>Auto</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Center 5</geometry:PlacementOptions>
<geometry:PlacementOptions>Center -5</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Top Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Bottom Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Center</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Left</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Right</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Top</geometry:PlacementOptions>
<geometry:PlacementOptions>Auto Bottom</geometry:PlacementOptions>
</ListBox>
<geometry:BoxBalloon Grid.Row="1"
Grid.Column="1"Margin="6"ConnectorAngle="45"CornerRadius="10"PlacementOptions="{Binding SelectedItem, ElementName=Placements}"PlacementRectangle="0, 0, 100, 10"PlacementTarget={Binding ElementName=Target}
Stroke="HotPink"StrokeThickness="4" />
</Grid>
<Rectanglex:Name="Target"
Canvas.Left="100"
Canvas.Top="50"Width="100"Height="10"Fill="Gainsboro"MouseLeftButtonDown="OnTargetMouseLeftDown" />
</Canvas>

PlacementTarget

The UIElement to connect the balloon to.

PlacementRectangle

The rectangle to connect the balloon to. If used with PlacementTarget, the rectangle coordinates are relative to it. If used alone, the coordinates are relative to the parent UIElement.

PlacementOptions

Where on the connected element the connector should be attached.

In xaml either input a string <geometry:BoxBalloon PlacementOptions="Top Left" .../> Or use the PlacementOptionsExtension:

<geometry:BoxBalloonPlacementOptions="{geometry:PlacementOptions Horizontal=Auto, Vertical=Top, Offset=5}"
...
/>

EllipseBalloon

Same API as BoxBalloon but renders:

GradientPath

Based on this blog post

<geometry:GradientPathGradientMode="Parallel"StrokeThickness="10"UseLayoutRounding="True">
<geometry:GradientPath.Data>
<PathGeometry>
<PathFigureStartPoint="35,400">
<LineSegmentPoint="100,300" />
<BezierSegmentPoint1="300,10"Point2="500,600"Point3="700,300" />
<LineSegmentPoint="800,100" />
</PathFigure>
<PathFigureStartPoint="200,200">
<LineSegmentPoint="200,400" />
<LineSegmentPoint="400,400" />
</PathFigure>
</PathGeometry>
</geometry:GradientPath.Data>
<geometry:GradientPath.GradientStops>
<GradientStopOffset="0"Color="#4C0000FF" />
<GradientStopOffset="0.5"Color="#4CFF0000" />
<GradientStopOffset="1"Color="#4CFFFF00" />
</geometry:GradientPath.GradientStops>
</geometry:GradientPath>

Controls

Zoombox

Panel for zooming & panning. Handles touch but IsManipulationEnabled has default value false meaning no touch.

<UserControl ...
xmlns:effects="http://gu.se/Geometry">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinitionHeight="Auto" />
</Grid.RowDefinitions>
<effects:Zoomboxx:Name="ImageBox"IsManipulationEnabled="True"MaxZoom="10"MinZoom="0.1">
<ImageSource="Images/Circles.png" />
</effects:Zoombox>
<UniformGrid Grid.Row="1"Rows="1">
<ButtonCommand="effects:ZoomCommands.Increase"CommandParameter="2.0"CommandTarget="{Binding ElementName=ImageBox}"Content="Increase" />
<ButtonCommand="effects:ZoomCommands.Decrease"CommandParameter="2.0"CommandTarget="{Binding ElementName=ImageBox}"Content="Decrease" />
<ButtonCommand="effects:ZoomCommands.None"CommandTarget="{Binding ElementName=ImageBox}"Content="None" />
<ButtonCommand="effects:ZoomCommands.Uniform"CommandTarget="{Binding ElementName=ImageBox}"Content="Uniform" />
<ButtonCommand="effects:ZoomCommands.UniformToFill"CommandTarget="{Binding ElementName=ImageBox}"Content="UniformToFill" />
</UniformGrid>
</Grid>
</UserControl>

Effects

A collection of pixel shaders.

DesaturateEffect

Desaturate an image, brush or WPF controls. It has only one property Strength 0 means the effect does nothing and 1 means a grayscale image is returned.

<UserControl
...
xmlns:effects="http://gu.se/Geometry">
<Grid>
<ImageSource="Images/Hustler.jpg">
<Image.Effect>
<effects:DesaturateEffectStrength="{Binding ElementName=Slider, Path=Value}" />
</Image.Effect>
</Image>
<Sliderx:Name="Slider"VerticalAlignment="Bottom"Maximum="1"Minimum="0" />
</Grid>
</UserControl>

FadeEffect

Fade an image to a colour.

<UserControl ...
xmlns:effects="http://gu.se/Geometry">
<Grid>
<ImageSource="../Images/Hustler.jpg">
<Image.Effect>
<effects:FadeEffectTo="Black"Strength="{Binding ElementName=StrengthSlider, Path=Value}" />
</Image.Effect>
</Image>
<Sliderx:Name="StrengthSlider"VerticalAlignment="Bottom"Maximum="1"Minimum="0" />
</Grid>
</UserControl>

MaskEffect

Render an image as a selection mask.

<UserControl ...
xmlns:effects="http://gu.se/Geometry">
<Grid>
<ImageSource="../Images/Circle.png">
<Image.Effect>
<effects:MaskEffect />
</Image.Effect>
</Image>
</Grid>
</UserControl>

AngularGradientEffect

A gradient that changes value along the angle. Perhaps useful for spinners. Replaces the pixels of the owning element. The owning element must have a Brush set the brush can be any color that is not transparent.

StartAngle

The angle for the StartColor -360 - 360 degrees, positive clockwise. Zero at 12 o'clock.

CentralAngle

The anglular extent of the gradient -360 - 360 degrees, positive clockwise.

CenterPoint

The center point of the gradient (0, 0) - (1, 1) default is (0.5, 0.5) fore a gradient around the center.

<Windowxmlns="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:effects="http://gu.se/Geometry"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="AngularGradientWindow"SizeToContent="WidthAndHeight"mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
</Grid.RowDefinitions>
<GroupBoxx:Name="Render"
Grid.Row="0"
Grid.Column="1"Margin="50"Background="LightGray"BorderThickness="0"Style="{StaticResource InvisibleGroupBoxStyle}">
<Ellipsex:Name="Ellipse"Width="200"Height="200"Stroke="White"StrokeThickness="25">
<Ellipse.Effect>
<effects:AngularGradientEffectCenterPoint="{Binding ElementName=CenterPoint, Path=Text}"CentralAngle="{Binding ElementName=CentralAngle, Path=Value}"EndColor="{Binding ElementName=EndColour, Path=Text}"StartAngle="{Binding ElementName=StartAngle, Path=Value}"StartColor="{Binding ElementName=StartColour, Path=Text}" />
</Ellipse.Effect>
</Ellipse>
</GroupBox>
<TextBlock Grid.Row="1"
Grid.Column="0"Text="Start colour:" />
<TextBoxx:Name="StartColour"
Grid.Row="1"
Grid.Column="1"Text="#FFFF0000" />
<TextBlock Grid.Row="2"
Grid.Column="0"Text="End colour:" />
<TextBoxx:Name="EndColour"
Grid.Row="2"
Grid.Column="1"Text="#00FF0000" />
<TextBlock Grid.Row="3"
Grid.Column="0"Text="Center point:" />
<TextBoxx:Name="CenterPoint"
Grid.Row="3"
Grid.Column="1"Text="0.5 0.5" />
<TextBlock Grid.Row="4"
Grid.Column="0"Text="Start angle:" />
<Sliderx:Name="StartAngle"
Grid.Row="4"
Grid.Column="1"Maximum="360"Minimum="-360" />
<TextBlock Grid.Row="5"
Grid.Column="0"Text="Central angle:" />
<Sliderx:Name="CentralAngle"
Grid.Row="5"
Grid.Column="1"Maximum="360"Minimum="-360"Value="360" />
</Grid>
</Window>

HsvWheelEffect

A gradient that changes value along the angle. Perhaps useful for colour pickers. Note that the element must have a background or fill. The brush can be any colour.

<UserControl ...
xmlns:effects="http://gu.se/Geometry">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinitionHeight="Auto" />
<RowDefinitionHeight="Auto" />
</Grid.RowDefinitions>
<Ellipse Grid.ColumnSpan="2"Width="300"Height="300"HorizontalAlignment="Center"Fill="White">
<Ellipse.Effect>
<effects:HsvWheelEffectInnerRadius="{Binding ElementName=InnerRadius, Path=Value}"InnerSaturation="{Binding ElementName=InnerSaturation, Path=Value}" />
</Ellipse.Effect>
</Ellipse>
<Label Grid.Row="1"
Grid.Column="0"Content="Inner radius:" />
<Sliderx:Name="InnerRadius"
Grid.Row="1"
Grid.Column="1"Maximum="1"Minimum="0"Value="0" />
<Label Grid.Row="2"
Grid.Column="0"Content="Inner saturation:" />
<Sliderx:Name="InnerSaturation"
Grid.Row="2"
Grid.Column="1"Maximum="1"Minimum="0"Value="0" />
</Grid>
</UserControl>

HslWheelEffect

A gradient that changes value along the angle. Perhaps useful for colour pickers. Note that the element must have a background or fill. The brush can be any colour. Same API as HsvWheelEffect