Gu.Wpf.Geometry

Small library with WPF geometries and shaders.

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>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox x: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>
    <Rectangle x:Name="Target"
               Canvas.Left="100"
               Canvas.Top="50"
               Width="100"
               Height="10"
               Fill="Gainsboro"
               MouseLeftButtonDown="OnTargetMouseLeftDown" />
</Canvas>

With PlacementRectangle

<Canvas>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox x: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>
    <Rectangle x: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>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox x: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>
    <Rectangle x: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:BoxBalloon PlacementOptions="{geometry:PlacementOptions Horizontal=Auto,
                                                                  Vertical=Top,
                                                                  Offset=5}"
                     ...
                      />

EllipseBalloon

Same API as BoxBalloon but renders:

GradientPath

Based on this blog post

<geometry:GradientPath GradientMode="Parallel"
                        StrokeThickness="10"
                        UseLayoutRounding="True">
    <geometry:GradientPath.Data>
        <PathGeometry>
            <PathFigure StartPoint="35,400">
                <LineSegment Point="100,300" />
                <BezierSegment Point1="300,10"
                                Point2="500,600"
                                Point3="700,300" />
                <LineSegment Point="800,100" />
            </PathFigure>
            <PathFigure StartPoint="200,200">
                <LineSegment Point="200,400" />
                <LineSegment Point="400,400" />
            </PathFigure>
        </PathGeometry>
    </geometry:GradientPath.Data>
    <geometry:GradientPath.GradientStops>
        <GradientStop Offset="0" Color="#4C0000FF" />
        <GradientStop Offset="0.5" Color="#4CFF0000" />
        <GradientStop Offset="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 />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <effects:Zoombox x:Name="ImageBox"
                         IsManipulationEnabled="True"
                         MaxZoom="10"
                         MinZoom="0.1">
            <Image Source="Images/Circles.png" />
        </effects:Zoombox>
        <UniformGrid Grid.Row="1" Rows="1">
            <Button Command="effects:ZoomCommands.Increase"
                    CommandParameter="2.0"
                    CommandTarget="{Binding ElementName=ImageBox}"
                    Content="Increase" />

            <Button Command="effects:ZoomCommands.Decrease"
                    CommandParameter="2.0"
                    CommandTarget="{Binding ElementName=ImageBox}"
                    Content="Decrease" />

            <Button Command="effects:ZoomCommands.None"
                    CommandTarget="{Binding ElementName=ImageBox}"
                    Content="None" />

            <Button Command="effects:ZoomCommands.Uniform"
                    CommandTarget="{Binding ElementName=ImageBox}"
                    Content="Uniform" />

            <Button Command="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>
        <Image Source="Images/Hustler.jpg">
            <Image.Effect>
                <effects:DesaturateEffect Strength="{Binding ElementName=Slider, Path=Value}" />
            </Image.Effect>
        </Image>
        <Slider
            x: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>
        <Image Source="../Images/Hustler.jpg">
            <Image.Effect>
                <effects:FadeEffect To="Black" Strength="{Binding ElementName=StrengthSlider, Path=Value}" />
            </Image.Effect>
        </Image>
        <Slider
            x: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>
        <Image Source="../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.

<Window 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:effects="http://gu.se/Geometry"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="AngularGradientWindow"
        SizeToContent="WidthAndHeight"
        mc:Ignorable="d">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <GroupBox x:Name="Render"
                  Grid.Row="0"
                  Grid.Column="1"
                  Margin="50"
                  Background="LightGray"
                  BorderThickness="0"
                  Style="{StaticResource InvisibleGroupBoxStyle}">
            <Ellipse x:Name="Ellipse"
                     Width="200"
                     Height="200"
                     Stroke="White"
                     StrokeThickness="25">
                <Ellipse.Effect>
                    <effects:AngularGradientEffect CenterPoint="{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:" />
        <TextBox x:Name="StartColour"
                 Grid.Row="1"
                 Grid.Column="1"
                 Text="#FFFF0000" />

        <TextBlock Grid.Row="2"
                   Grid.Column="0"
                   Text="End colour:" />
        <TextBox x:Name="EndColour"
                 Grid.Row="2"
                 Grid.Column="1"
                 Text="#00FF0000" />

        <TextBlock Grid.Row="3"
                   Grid.Column="0"
                   Text="Center point:" />
        <TextBox x:Name="CenterPoint"
                 Grid.Row="3"
                 Grid.Column="1"
                 Text="0.5 0.5" />

        <TextBlock Grid.Row="4"
                   Grid.Column="0"
                   Text="Start angle:" />
        <Slider x:Name="StartAngle"
                Grid.Row="4"
                Grid.Column="1"
                Maximum="360"
                Minimum="-360" />

        <TextBlock Grid.Row="5"
                   Grid.Column="0"
                   Text="Central angle:" />
        <Slider x: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>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Ellipse Grid.ColumnSpan="2"
                 Width="300"
                 Height="300"
                 HorizontalAlignment="Center"
                 Fill="White">
            <Ellipse.Effect>
                <effects:HsvWheelEffect InnerRadius="{Binding ElementName=InnerRadius, Path=Value}"
                                        InnerSaturation="{Binding ElementName=InnerSaturation, Path=Value}" />
            </Ellipse.Effect>
        </Ellipse>

        <Label Grid.Row="1"
               Grid.Column="0"
               Content="Inner radius:" />
        <Slider x:Name="InnerRadius"
                Grid.Row="1"
                Grid.Column="1"
                Maximum="1"
                Minimum="0"
                Value="0" />

        <Label Grid.Row="2"
               Grid.Column="0"
               Content="Inner saturation:" />
        <Slider x: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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Gu.Wpf.Geometry

Contents

Geometries

Balloon

BoxBalloon

Simple

ConnectorAngle

ConnectorOffset

With PlacementTarget

With PlacementRectangle

With PlacementRectangle and PlacementTarget

PlacementTarget

PlacementRectangle

PlacementOptions

EllipseBalloon

GradientPath

Controls

Zoombox

Effects

DesaturateEffect

FadeEffect

MaskEffect

AngularGradientEffect

StartAngle

CentralAngle

CenterPoint

HsvWheelEffect

HslWheelEffect

Files

README.md

Latest commit

History

README.md

File metadata and controls

Gu.Wpf.Geometry

Contents

Geometries

Balloon

BoxBalloon

Simple

ConnectorAngle

ConnectorOffset

With PlacementTarget

With PlacementRectangle

With PlacementRectangle and PlacementTarget

PlacementTarget

PlacementRectangle

PlacementOptions

EllipseBalloon

GradientPath

Controls

Zoombox

Effects

DesaturateEffect

FadeEffect

MaskEffect

AngularGradientEffect

StartAngle

CentralAngle

CenterPoint

HsvWheelEffect

HslWheelEffect