Showing posts with label Path. Show all posts
Showing posts with label Path. Show all posts

Friday, 25 October 2013

Path Markup Syntax

Taken from:  http://msdn.microsoft.com/en-us/library/ms752293.aspx

M= Start point

L = Creates a line to this end point

H = Creates a horizontal line between the current point and the specified x-coordinate. H 90 is an example of a valid horizontal line command.

V = Creates a vertical line between the current point and the specified y-coordinate. v 90 is an example of a valid vertical line command.

Z = Close

Thursday, 15 August 2013

How to flip a path in xaml

For those with Blend installed simply select the path and set the transform properties:

image

If you don’t have Blend then you can use on the following properties:

<Path Width="50" 
Height="50"
Data="F1M1719.66,218.12L1735.66,246.166 1751.66,274.21 1719.66,274.21 1687.66,274.21 1703.66,246.166 1719.66,218.12z"
Fill="Red"
Stretch="Uniform"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform Rotation="-180"/>
</Path.RenderTransform>
</Path>

Saturday, 27 October 2012

Some icons and paths

error       info       question       success

Cross

image

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="black">
<Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Fill="#FFFFFFFF" Data="M 22.0625,1.3432C 39.2625,-4.25677 59.1292,8.14319 61.6625,26.0099C 65.1292,42.9432 51.9292,60.5432 34.8625,62.2766C 18.8625,64.8099 2.32917,52.6765 0.0625,36.5432C -3.00417,21.4766 7.2625,5.47656 22.0625,1.3432 Z M 22.0625,5.47656C 11.3958,9.07654 3.12917,19.8765 3.52917,31.3432C 2.99583,46.4099 17.2625,59.8765 32.1958,58.5432C 47.2625,58.2766 60.0625,43.6099 58.0625,28.6765C 56.9958,11.7432 37.9292,-0.390137 22.0625,5.47656 Z M 18.4625,23.3432C 19.7958,21.8765 20.9958,20.5432 22.4625,19.4766C 25.2625,22.2766 28.0625,25.0765 30.9958,27.8765C 34.0625,25.2099 36.7292,22.0099 39.9292,19.4766C 41.1292,20.8099 42.3292,22.0099 43.5292,23.3432C 40.8625,26.4099 37.6625,29.0765 35.1292,32.2766C 38.0625,34.9432 40.8625,37.8765 43.5292,40.6765C 42.3292,42.0099 41.1292,43.3432 39.9292,44.6765C 36.7292,42.0099 34.0625,38.8099 30.9958,36.1432C 27.9292,38.9432 25.2625,42.1432 21.9292,44.6765C 20.8625,43.2099 19.6625,42.0099 18.5958,40.6765C 20.9958,37.7432 23.9292,35.2099 26.5958,32.4099C 25.1292,28.8099 20.8625,26.5432 18.4625,23.3432 Z "/>
</Grid>

Info


image

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="black">
<Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Fill="#FFFFFFFF" Data="M 22.0625,1.33777C 39.2625,-4.26221 59.1292,8.27112 61.6625,26.0045C 65.1292,42.9377 51.9292,60.5378 34.8625,62.2711C 18.8625,64.8044 2.32917,52.6711 0.0625,36.5378C -3.00417,21.4711 7.2625,5.47113 22.0625,1.33777 Z M 22.0625,5.47113C 11.3958,9.07111 3.12917,19.8711 3.52917,31.3378C 2.99583,46.4044 17.2625,59.8711 32.1958,58.5378C 47.2625,58.2711 60.0625,43.6044 58.0625,28.6711C 56.9958,11.7378 37.9292,-0.395569 22.0625,5.47113 Z M 28.3292,16.1378C 31.2625,14.9378 36.0625,15.3378 35.9292,19.3378C 35.9292,23.3378 31.2625,23.3378 28.4625,22.5378L 28.5958,21.3378C 28.5958,20.0045 28.5958,18.6711 28.4625,17.3378L 28.3292,16.1378 Z M 28.5958,21.3378C 25.7958,22.1378 25.7958,16.5378 28.4625,17.3378C 28.5958,18.6711 28.5958,20.0045 28.5958,21.3378 Z M 28.8625,26.2711C 30.9958,26.1378 32.9958,26.0045 35.1292,26.0045C 35.2625,33.6044 35.2625,41.0711 35.1292,48.6711C 32.9958,48.5378 30.9958,48.5378 28.8625,48.4044C 30.0625,48.0045 32.3292,47.3378 33.5292,47.0711C 34.3292,40.5378 34.1958,34.1378 33.5292,27.6044C 32.3292,27.3378 30.0625,26.6711 28.8625,26.2711 Z M 28.8625,26.2711C 30.0625,26.6711 32.3292,27.3378 33.5292,27.6044C 34.1958,34.1378 34.3292,40.5378 33.5292,47.0711C 32.3292,47.3378 30.0625,48.0045 28.8625,48.4044C 28.9958,41.0711 28.9958,33.6044 28.8625,26.2711 Z "/>
</Grid>


Question Mark


image

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="black">
<Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Fill="#FFFFFFFF" Data="M 22.1958,1.33777C 39.3958,-4.26224 59.2625,8.27112 61.7958,26.0044C 65.2625,42.9378 52.0625,60.5378 34.9958,62.2711C 18.8625,64.8044 2.4625,52.6711 0.0625,36.5378C -2.87083,21.4711 7.39583,5.4711 22.1958,1.33777 Z M 22.3292,5.4711C 11.5292,9.07111 3.2625,19.8711 3.6625,31.3378C 3.12917,46.4044 17.3958,59.8711 32.3292,58.5378C 47.3958,58.2711 60.1958,43.6044 58.1958,28.6711C 57.1292,11.7378 38.0625,-0.395569 22.3292,5.4711 Z M 24.7292,15.7378C 30.9958,11.8711 42.5958,14.6711 42.3292,23.3378C 43.1292,30.2711 34.0625,31.6044 33.3958,38.0044C 31.3958,38.0044 29.3958,38.0044 27.3958,37.8711C 27.6625,35.8711 27.7958,33.7378 28.5958,31.8711C 30.3292,29.0711 33.3958,27.3378 35.1292,24.5378C 35.3958,21.8711 33.1292,18.8044 30.1958,19.8711C 27.3958,20.2711 27.2625,23.7378 26.1958,25.7378C 23.9292,25.7378 21.6625,25.6044 19.3958,25.4711C 20.1958,21.8711 21.1292,17.7378 24.7292,15.7378 Z M 27.9292,41.6044C 29.5292,39.2044 32.5958,40.8044 34.4625,41.7378C 34.1958,43.7378 34.8625,46.8044 32.1958,47.6044C 28.7292,49.2044 25.1292,44.2711 27.9292,41.6044 Z "/>
</Grid>


Tick




image

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="black">
<Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Fill="#FFFFFFFF" Data="M 22.0625,1.33466C 38.7292,-4.13202 58.1958,7.46799 61.5292,24.8013C 65.7958,42.0013 52.4625,60.5347 34.8625,62.268C 18.8625,64.8013 2.32917,52.668 0.0625,36.668C -3.00417,21.468 7.2625,5.46799 22.0625,1.33466 Z M 22.0625,5.46799C 10.8625,9.20132 2.59583,20.8013 3.52917,32.668C 3.79583,47.2013 17.6625,59.7346 32.1958,58.5347C 47.2625,58.268 60.0625,43.6013 58.0625,28.668C 56.9958,11.7346 37.9292,-0.398682 22.0625,5.46799 Z M 41.7958,17.6013C 43.3958,18.668 47.7958,19.868 45.7958,22.4013C 39.9292,29.7346 34.4625,37.6013 28.1958,44.5347C 23.7958,40.8013 20.3292,36.268 16.3292,32.1347C 13.9292,30.1347 17.6625,28.268 18.9958,26.9347C 22.4625,29.2013 24.7292,33.068 28.0625,35.7346C 32.4625,29.468 37.3958,23.7346 41.7958,17.6013 Z "/>
</Grid>

Monday, 9 April 2012

Custom Tooltip and Popup

Like with everything else in WPF you can override the style for tooltips.

Standard Tooltip

image_thumb3

Custom Tooltip

image_thumb1[1]

<Window.Resources>
<Style x:Key="CustomTooltip" TargetType="{x:Type ToolTip}">
<Setter Property="HorizontalOffset" Value="50" />
<Setter Property="VerticalOffset" Value="-50" />
<Setter Property="Background" Value="Beige" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
</Window.Resources>

<!-- the following code lives inside the control you want to tooltip -->
<Grid.ToolTip>
<ToolTip Style="{StaticResource CustomTooltip}">
<TextBlock>Custom tooltip</TextBlock>
</ToolTip>
</Grid.ToolTip>

This custom tooltip rather boringly just features a textblock but you can customise with any fonts and colours and include any combination of UI controls such as images, animations or even video.


Source:  http://stevenhollidge.com/blog-source-code/WrappingListbox-CustomTooltip.zip


Custom Tooltip with Shape (Path)


image_thumb1

<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="HorizontalOffset" Value="0" />
<Setter Property="VerticalOffset" Value="-75" />
<Setter Property="Background" Value="GhostWhite" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Canvas Width="200" Height="100">
<Path x:Name="Container"
Canvas.Left="0"
Canvas.Top="0"
Margin="20"
Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30"
Fill="{TemplateBinding Background}"
Stroke="Black">
<Path.Effect>
<DropShadowEffect BlurRadius="10"
Opacity="0.5"
ShadowDepth="4" />
</Path.Effect>
</Path>
<TextBlock Canvas.Left="50"
Canvas.Top="28"
Width="100"
Height="65"
Text="{TemplateBinding Content}"
TextWrapping="Wrapwithoverflow" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Source:  http://stevenhollidge.com/blog-source-code/WrappingListbox-CustomTooltip-WithPath.zip


Popup


image_thumb[1]

<Popup x:Name="PopupInfo"
AllowsTransparency="True"
HorizontalOffset="-10"
IsOpen="{Binding ElementName=backgroundGrid,
Path=IsMouseOver,
Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}"
VerticalOffset="-30"
Placement="Right">

<Canvas Width="200" Height="100">
<Path x:Name="Container"
Canvas.Left="0"
Canvas.Top="0"
Margin="20"
Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30"
Fill="Beige"
Stroke="Black">
<Path.Effect>
<DropShadowEffect BlurRadius="10"
Opacity="0.5"
ShadowDepth="4" />
</Path.Effect>
</Path>
<TextBlock Canvas.Left="50"
Canvas.Top="28"
Width="100"
Height="65"
Text="Popup with text...."
TextWrapping="Wrapwithoverflow" />

</Canvas>
</Popup>

Source: http://stevenhollidge.com/blog-source-code/wpf-popup.zip

Thursday, 25 August 2011

Convert Text to Path in Xaml

In Expression Blend you can convert any object to a path:  Object Menu > Path > Convert to Path.

Or you can download my WPF app

ClickOnce installer http://stevenhollidge.com/blog-source-code/clickonce/text2path/Text2Path.html
Source code https://github.com/stevenh77/Text2Path

 

Screenshot

image

The Code

<Controls:MetroWindow x:Class="Text2Path.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Text2Path"
Height="500"
Width="660"
ShowMinButton="False"
ShowMaxRestoreButton="False"
ShowIconOnTitleBar="true"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">

<Controls:MetroWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
<ResourceDictionary Source="Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>

<Style TargetType="ComboBox">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Margin" Value="10"/>
</Style>

<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Height" Value="30" />
</Style>

<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Height" Value="30" />
</Style>

</ResourceDictionary>

</Controls:MetroWindow.Resources>

<Controls:MetroWindow.WindowCommands>
<Controls:WindowCommands>
<Button x:Name="BlogButton" Content="blog" Click="BlogButton_Click" />
</Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="100" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>

<TextBlock Text="Text:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="TextTextBlock" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="3" />
<Button x:Name="ConvertButton" Grid.Column="4" Grid.Row="0" Content="Convert" Click="ConvertButton_Click" VerticalAlignment="Top" Margin="10"/>

<TextBlock Text="Culture:" Grid.Column="0" Grid.Row="1" />
<ComboBox x:Name="CultureComboBox" Grid.Column="1" Grid.Row="1" />

<TextBlock Text="Direction:" Grid.Column="2" Grid.Row="1" />
<ComboBox x:Name="DirectionComboBox" Grid.Column="3" Grid.Row="1" IsReadOnly="True" />

<TextBlock Text="Font:" Grid.Column="0" Grid.Row="2" />
<ComboBox x:Name="FontComboBox" Grid.Column="1" Grid.Row="2" />

<TextBlock Text="Font Size:" Grid.Column="2" Grid.Row="2" />
<ComboBox x:Name="FontSizeComboBox" Grid.Column="3" Grid.Row="2" />

<TextBlock Text="Result:" Grid.Row="3" VerticalAlignment="Top" Visibility="Collapsed"/>
<Path x:Name="OutputPath" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"
Stroke="Black" Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>

<TextBlock x:Name="PathTextBlock" Text="Path:" Grid.Row="4" VerticalAlignment="Top" Visibility="Collapsed"/>
<TextBox x:Name="OutputTextBox" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="4"
IsReadOnly="True"
VerticalAlignment="Stretch"
Visibility="Collapsed"
TextWrapping="WrapWithOverflow"
FontSize="12"
Height="180"/>

<Button x:Name="CopyButton" Visibility="Collapsed" Grid.Column="4" Grid.Row="4" Content="Copy" Click="CopyButton_Click" VerticalAlignment="Top" Margin="10"/>
<TextBlock x:Name="ClipboardResponse" Grid.Column="4" Grid.Row="4" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="12" Foreground="Red" Margin="0,60,0,0"/>

</Grid>
</Controls:MetroWindow>


 

using System;
using System.Collections;
using System.Drawing.Text;
using System.Globalization;
using System.Linq;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

namespace Text2Path
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
Populate();
SetDefaults();
}

private void Populate()
{
CultureComboBox.ItemsSource = Helper.GetAvailableCultures();
DirectionComboBox.ItemsSource = Helper.GetDirections();
FontComboBox.ItemsSource = Helper.GetFonts();
FontSizeComboBox.ItemsSource = Helper.GetFontSizes();
}

private void SetDefaults()
{
TextTextBlock.Text = "Convert this text!";
CultureComboBox.SelectedItem = "en-US";
DirectionComboBox.SelectedItem = "Left to right";
FontComboBox.SelectedItem = "Segoe UI";
FontSizeComboBox.SelectedItem = "48";
}

private void ConvertButton_Click(object sender, RoutedEventArgs e)
{
try
{
this.Cursor = Cursors.Wait;

var path = Helper.Text2Path(TextTextBlock.Text,
CultureComboBox.Text,
(DirectionComboBox.Text == "Left to right"),
FontComboBox.Text,
Int32.Parse(FontSizeComboBox.Text));

OutputTextBox.Text = string.Format("<Path Stroke={0}Black{0} Fill={0}Black{0} Data={0}{1}{0} />", '"', path);
PathTextBlock.Visibility = Visibility.Visible;
CopyButton.Visibility = Visibility.Visible;

OutputPath.Data = Geometry.Parse(path);
}
catch (Exception ex)
{
OutputTextBox.Text = ex.Message;
}
finally
{
OutputTextBox.Visibility = Visibility.Visible;
this.Cursor = Cursors.Arrow;
}
}

private void BlogButton_Click(object sender, RoutedEventArgs e)
{
System.Diagnostics.Process.Start("http://stevenhollidge.blogspot.com");
}

private void CopyButton_Click(object sender, RoutedEventArgs e)
{
try
{
Clipboard.SetData(DataFormats.Text, OutputTextBox.Text);
ClipboardResponse.Text = "Success";
}
catch
{
ClipboardResponse.Text = "Failed";
}
}
}

public class Helper
{
public static string Text2Path(String text, string culture, bool leftToRight, string font, int fontSize)
{
if (culture == "") culture = "en-us";

var ci = new CultureInfo(culture);
var fd = leftToRight ? FlowDirection.LeftToRight : FlowDirection.RightToLeft;
var ff = new FontFamily(font);
var tf = new Typeface(ff, FontStyles.Normal, FontWeights.Normal, FontStretches.Normal);
var t = new FormattedText(text, ci, fd, tf, fontSize, Brushes.Black);
var g = t.BuildGeometry(new Point(0, 0));
var p = g.GetFlattenedPathGeometry();

return p.ToString();
}

public static IEnumerable GetAvailableCultures()
{
return CultureInfo.GetCultures(CultureTypes.SpecificCultures | CultureTypes.NeutralCultures)
.Select(x => x.Name)
.ToList();
}

public static IEnumerable GetDirections()
{
return new [] {"Left to right", "Right to left" };
}

public static IEnumerable GetFonts()
{
return new InstalledFontCollection().Families.Select(font => font.Name).ToList();
}

public static IEnumerable GetFontSizes()
{
return new [] { 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 26, 28, 36, 48, 72 }.Select(x => x.ToString());
}
}
}