I was trying to make re-usable tamplete for image button, and found this great advice, but I wasn't able to make it work. Can you please advice my, what am I doing wrong? I am pretty newbie with WPF, so it may be something really basic, but I can't see it.
My ImageButton.cs class:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace ImageBut
{
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton),
new FrameworkPropertyMetadata(typeof(ImageButton)));
}
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(default(ImageSource)));
}
}
My generic.xaml in Themes subfolder.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:ImageBut;assembly=ImageBut"
>
<Style x:Key="{x:Type my:ImageButton}" TargetType="{x:Type my:ImageButton}">
<Setter Property="Width" Value="32"></Setter>
<Setter Property="Height" Value="32"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Margin" Value="4,0,0,0"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Source="{TemplateBinding Image}" Stretch="Fill"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
My MainWindow.xaml
<Window x:Class="ImageBut.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:ImageBut;assembly=ImageBut"
Title="MainWindow" Height="350" Width="525">
<Grid>
<my:ImageButton Image="C:\Users\Martin\Source\Workspaces\Digiterm\ImageBut\ImageBut\1_1.bmp"></my:ImageButton>
</Grid>
</Window>
Here are my Project properties and here is snapchat of Solution Explorer.
Exception I am getting:
1>C:\Users\Martin\Source\Workspaces\Digiterm\ImageBut\ImageBut\MainWindow.xaml(7,10): error MC3074: The tag 'ImageButton' does not exist in XML namespace 'clr-namespace:ImageBut;assembly=ImageBut'.
Thank you!
You shouldn't need the assembly name in the namespace declaration.
Instead of this:
xmlns:my="clr-namespace:ImageBut;assembly=ImageBut"
try this:
xmlns:my="clr-namespace:ImageBut"
As an aside, the standard WPF Button control supports any kind of content, including images. So you can have an Image control inside a Button, like so:
<Button>
<Image Source="C:\Users\Martin\Source\Workspaces\Digiterm\ImageBut\ImageBut\1_1.bmp" />
</Button>
EDIT
In your generic.xaml file you have set the TargetType of the ControlTemplate to the wrong thing, which is causing a compile-time error. Instead of:
<ControlTemplate TargetType="{x:Type Button}">
it should be:
<ControlTemplate TargetType="{x:Type my:ImageButton}">
After fixing this, the project compiled successfully on my computer.
Related
(For the back story about this question please see Question Here)
To continue learning about WPF I am trying to Extend an TextBox Control and add a Dependency Property which can be used in a Style to put a border around my extended TextBox Control. To help me achieve this I am using this article basics-of-extending-a-wpf-control.
I have encountered two problems:
1. When I put the style into a Resource Dictionary and try to merge the Resource Dictionary with a file called "generic.xaml" (also tried "Generic.xaml") the style does not take, upon reading this question here trouble-referencing-a-resource-dictionary-that-contains-a-merged-dictionary I tried the solution of adding a Style referencing any control but it did not work (all code at the bottom of the question}. Can anyone explain why please?
2. To overcome the problem above I moved my Style into a Window Resource, but I encounted a different problem. I purposely left out the following code from the worked example in my Constructor of my Extended Control
static ExTextBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ExTextBox),
new FrameworkPropertyMetadata(typeof(ExTextBox)));
}
as I was expecting my control to inherit the default style of the Standard TextBox, which includes the Properties BorderThickness and BorderBrush. However, when I try and Set these Properties with the Setter statement vs2010 says it can not find the Properties. Can someone explain why and if these Properties are not inherited do I have to use a Control Template in my Style to set up a Border around my Control?
My code from problem 1
MainWindow.xaml
<Window x:Class="Controls.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StyleTriggersSample" Height="100" Width="300" xmlns:my="clr-namespace:Controls">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="138*" />
<ColumnDefinition Width="140*" />
</Grid.ColumnDefinitions>
<my:ExTextBox Height="23" HorizontalAlignment="Left" Margin="12,28,0,0" x:Name="exTextBox1" Text="ExTextBlock" VerticalAlignment="Top" Width="116" />
<TextBox Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="14,30,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="textBox1" />
<Button Content="Test" Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="14,0,0,0" Name="button1" VerticalAlignment="Top" Width="114" Click="button1_Click" />
</Grid>
My Extended Control
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Controls
{
public class ExTextBox : TextBlock
{
public static DependencyProperty ErrorFlagProperty =
DependencyProperty.Register("ErrorFlag", typeof(bool),
typeof(ExTextBox),
new FrameworkPropertyMetadata((bool)false) );
public bool ErrorFlag
{
get { return (bool)GetValue(ErrorFlagProperty); }
set { SetValue(ErrorFlagProperty, value); }
}
static ExTextBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ExTextBox),
new FrameworkPropertyMetadata(typeof(ExTextBox)));
}
}
}
Controls.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Controls:ExTextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="FontSize" Value="28" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="120" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="BorderThickness"
Value="5" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
generic.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/TestContentStyle;component/Controls.xaml" />
</ResourceDictionary.MergedDictionaries>-->
<!-- Dummy Style, anything you won't use goes -->
<Style TargetType="{x:Type Rectangle}" />
I need help because I don't understand why the controls coming from a datatemplate doesn't inherit the style defined in the window resources.
May be is there a workaround?
I would be very thankful if someone could give me a solution because I've spent a lots of time to find something.
Hereby my exmaple. For instance the Texblock in horrizontal Template is not align:
Udapte :
I have added background colors. The style is applied to label but not totextblock and textbox defined by the datatemplate.
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:localview="clr-namespace:WpfApplication3"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="{x:Type TextBlock}" TargetType="TextBlock" >
<Setter Property="Background" Value="Cyan"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="3"/>
<Setter Property="FontFamily" Value="Comic Sans MS"/>
</Style>
<Style x:Key="{x:Type Label}" TargetType="Label">
<Setter Property="Background" Value="Red"/>
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style x:Key="{x:Type TextBox}" TargetType="TextBox">
<Setter Property="Background" Value="Cyan"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="3"/>
</Style>
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="3"/>
</Style>
<localview:TemplateSelector x:Key="TemplateSelector">
<localview:TemplateSelector.DataTemplateH>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="Value"/>
<TextBox Text="{Binding Path=SelectedItem.Content ,ElementName=Combo}"/>
</StackPanel>
</DataTemplate>
</localview:TemplateSelector.DataTemplateH>
<localview:TemplateSelector.DataTemplateV>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="Value"/>
<StackPanel Orientation="Horizontal">
<Label Content="new line"/>
**<TextBlock Text="{Binding Path=SelectedItem.Content ,ElementName=Combo}" TextAlignment="Right"/>**
</StackPanel>
</StackPanel>
</DataTemplate>
</localview:TemplateSelector.DataTemplateV>
</localview:TemplateSelector>
</Window.Resources>
<StackPanel Orientation="Vertical">
<StackPanel>
<TextBlock Text="Texblock"/>
<TextBox Text="Texblock"/>
<StackPanel Orientation="Horizontal">
<Label Content="Value"/>
<ComboBox Name="Combo">
<ComboBox.Items>
<ComboBoxItem Content="H"/>
<ComboBoxItem Content="V"/>
</ComboBox.Items>
</ComboBox>
</StackPanel>
<ContentControl ContentTemplateSelector="{StaticResource TemplateSelector}"
Content="{Binding Path=SelectedItem.Content ,ElementName=Combo}" />
</StackPanel>
</StackPanel>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Reflection;
namespace WpfApplication3
{
public class TemplateSelector : DataTemplateSelector
{
public DataTemplate DataTemplateH
{
get;
set;
}
public DataTemplate DataTemplateV
{
get;
set;
}
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
string s = (string)item;
if (s == "H")
return DataTemplateH;
if (s == "V")
return DataTemplateV;
return base.SelectTemplate(item, container);
}
}
}
Just to shed some light on why the TextBlock doesn't find its implicit style, there is a curious rule in WPF implicit styles are only inherited across template boundaries by elements which inherit from the Control class; elements which do not inherit from Control will not probe for implicit styles outside of the parent template.
The code responsible for this can be found in FrameworkElement:
// FindImplicitSytle(fe) : Default: unlinkedParent, deferReference
internal static object FindImplicitStyleResource(
FrameworkElement fe,
object resourceKey,
out object source)
{
...
// For non-controls the implicit StyleResource lookup must stop at
// the templated parent. Look at task 25606 for further details.
DependencyObject boundaryElement = null;
if (!(fe is Control))
{
boundaryElement = fe.TemplatedParent;
}
...
}
Carole Snyder at Microsoft explains the reasons for this behavior:
The reason I was given is that Controls are more obvious than elements, and it's likely that an implicit style for a control should be applied everywhere, where it is less likely that a implicit style for an element should be universally applied. There's a legitimate point to this argument. Consider the following:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
</StackPanel.Resources>
<TextBlock HorizontalAlignment="Center" Text="Hello!"/>
<Button Content="Click me!" Width="200"/>
<TextBlock HorizontalAlignment="Center" Text="Please click the button"/>
</StackPanel>
A Button displays strings by eventually creating a TextBlock and adding the string to the TextBlock. If the TextBlock in the Button used implicit styles defined by the application, the XAML would render this way:
That probably isn't the behavior you want. On the other hand, suppose you're creating a cool UI and you want all of your RepeatButtons to have a specific look. If you define the appearance of the RepeatButton once, all RepeatButtons will use have that appearance, even if the RepeatButton is inside a ControlTemplate.
I've just tried some simple demos and yes the answer is you cannot apply default Style defined somewhere outside the template to some TextBlock inside the template (including both DataTemplate and ControlTemplate). This does not happen to other controls such as Label, TextBox (although you also said the Style did not apply on the TextBox, but I tried it and actually that's not true).
To fix the issue, the best way is set the Style explicitly for the TextBlock something like this:
<TextBlock Text="{Binding Path=SelectedItem.Content ,ElementName=Combo}"
TextAlignment="Right" Style="{StaticResource {x:Type TextBlock}}"/>
Note that as I said, it's required only for TextBlocks inside template (DataTemplate and ControlTemplate).
The code looks fairly ridiculous but it actually works, without doing that way as you see it won't work.
A few options without making the style explicit:
If you want the styles to apply everywhere, put them in App.xaml. Implicit style lookup checks App.xaml even when blocked elsewhere.
If not, you can move the styles into a ResourceDictionary XAML file and merge it into the DataTemplate's resources (bypassing the inheritance block), and wherever else you want them.
If you truly want outside styles to inherit into the templates, you can use C# to add the control's resources to its DataTemplate's resources, bypassing the inheritance block. Something like: dataTemplate.Resources.MergedDictionaries.Add(control.Resources).
Big thanks to Mike's great answer for saving my sanity as to why TextBlock is special.
Here's how I want to summarize it:
Implicit styles are special when they target elements that don't inherit from Control (TextBlock, Ellipse, etc.). These styles are not inherited from outside of a control into its template unless they are defined in (or merged into) the control's resources or App.xaml. In the former case, they affect the control template but not header or content templates. In the latter, they affect all three.
i have a hard problem dealing with template. please help me.
App.xaml
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
//Note i didn't set a StartupURI in Application tag please.
<Application.Resources>
<Style TargetType="Window" x:Key="myWindowStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle Fill="gray" RadiusX="30" RadiusY="30"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
App.xaml.cs
using System;
using System.Windows;
namespace WpfApplication1
{
public partial class App : Application
{
CMainWindow winMain;
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
winMain = new CMainWindow();
winMain.ShowDialog();
}
}
}
CMainWindow.xaml
<Window x:Class="WpfApplication2.CMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Style="{StaticResource myWindowStyle}" Background="Red">
</Window>
=====================
question #1
when run this program, ide occure a runtime error : XmlParseException.
so i add a line in app.xaml, it runs properly. that line is : StartupUri="CMainWindow.xaml".
what is this? what relationship between template and startupuri? please tell me about this.
question #2
when i add control to CMainWindow, it didn't apeear even i set a in window's template.
how can i add control properly in this situation?
thanks.
question #1
A WPF application is always centered around a window. You're override of OnStartup is unnecessary. By setting the StartupURI the application will automatically start by displaying the window.
There is no actual relationship between template and startupuri. You just happen to be using App.xaml to store global styles.
question #2
The magic field to add is "TargetType" on the control template. You have to explicitly say its for the window type.
<Application x:Class="SimpleWPF.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="Window" x:Key="myWindowStyle">
<Setter Property="Template">
<Setter.Value>
<!-- Explicitly setting TargetType to Window -->
<ControlTemplate TargetType="Window">
<Grid>
<Rectangle Fill="gray" RadiusX="30" RadiusY="30"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
I would like to make a library of some of my commonly used WPF controls, and one of these controls is a CustomWindow which inherits from the Window class. How can I get my CustomWindow to use a default appearance that is defined in the library with it?
I can replace
<Window x:Class="..." />
with
<MyControls:CustomWindow x:Class="..." />
and it works for the window behavior, but not the appearnce.
EDIT
Here is a simplified version of what I have so far:
Custom Window Control. Located in the Control library.
public class CustomChromeWindow: Window
{
static CustomChromeWindow()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomChromeWindow),
new FrameworkPropertyMetadata(typeof(CustomChromeWindow)));
}
}
Window Style. Located in a Generic.xaml, a ResourceDictionary in the Themes folder of the control library
<Style TargetType="local:CustomChromeWindow">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Background" Value="Red" />
</Style>
Test Window. Startup window of a separate project that references the control library
<local:CustomChromeWindow
x:Class="MyControlsTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyControls;assembly=MyControls"
Title="MainWindow" Height="350" Width="525"
>
<Grid>
<TextBlock Text="This is a Test" />
</Grid>
</local:CustomChromeWindow>
What I end up getting is a window with the regular WindowStyle and a black background.
Use this xaml:
<Window x:Class="MyNamespace.CustomWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:MyControls="MyNamespace">
<Window.Style>
<Style TargetType="MyControls:CustomWindow">
...
</Style>
</Window.Style>
<ContentPresenter />
</Window>
You may want to design a new theme for the window. If so place following theme in (your library)\Themes\Generic.xaml resource file:
<Style TargetType="{x:Type MyControls:CustomWindow}">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MyControls:CustomWindow}">
<Border>
...
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try adding this to the AssemblyInfo.cs file in your class library
[assembly: ThemeInfo(
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
//(used if a resource is not found in the page,
// or application resource dictionaries)
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
//(used if a resource is not found in the page,
// app, or any theme specific resource dictionaries)
)]
How about this (put this in the default Cctor) :
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomWindow)
, new FrameworkPropertyMetadata(typeof(CustomWindow)));`
i have to develop a wpf control which shall have the same behaviour as the well known border.
The shape of the control shall be the new part. Every definable closed path shall be used to define the appearence of the control.
I need help to achieve this.
Currently i have no idea how to interchange the rectangle(??) with the closed path.
Any help would be highly appreciated.
Edit Here goes direct answer to your question. We will write a ContentControl derived class, with very flexible form of border. Basis for this idea lies in OpacityMask.
If you would like to know more about this approach take a look on example from Chris Cavanagh's solution for rounded corners.
Step 1. Create custom control FreeFormContentControl:
FreeFormContentControl.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WpfApplication5
{
public class FreeFormContentControl : ContentControl
{
public Geometry FormGeometry
{
get { return (Geometry)GetValue(FormGeometryProperty); }
set { SetValue(FormGeometryProperty, value); }
}
public static readonly DependencyProperty FormGeometryProperty =
DependencyProperty.Register("FormGeometry", typeof(Geometry), typeof(FreeFormContentControl), new UIPropertyMetadata(null));
static FreeFormContentControl()
{
DefaultStyleKeyProperty.OverrideMetadata(
typeof(FreeFormContentControl),
new FrameworkPropertyMetadata(typeof(FreeFormContentControl))
);
}
}
}
Themes\Generic.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication5">
<Style TargetType="{x:Type local:FreeFormContentControl}">
<Setter Property="FormGeometry"
Value="M0,0 L1,0 1,1 0,1z" />
<Setter Property="Background"
Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:FreeFormContentControl}">
<Grid>
<Path Name="mask"
Data="{TemplateBinding FormGeometry}"
Fill="{TemplateBinding Background}" />
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}" />
</Grid.OpacityMask>
<ContentPresenter />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
More reading on custom controls can be found on CodeProject.
Step 2. Usage. Now you can place any content inside this control. Its default shape is rectangle. So the following code will result in regular StackPanel UI:
<Window x:Class="WpfApplication5.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cc="clr-namespace:WpfApplication5"
Title="Window1"
Height="300"
Width="300">
<Grid>
<cc:FreeFormContentControl>
<StackPanel>
<Button Content="Any" />
<Button Content="Content" />
<TextBlock Text="Goes" />
<TextBox Text="Here" />
</StackPanel>
</cc:FreeFormContentControl>
</Grid>
</Window>
But if you define custom FormGeometry you'll get custom shape. For example, the following form geometry presents inner controls inside a diamond:
<cc:FreeFormContentControl FormGeometry="M0,0.5 L0.5,0 1,0.5 0.5,1z">
To read more about geometry definition from XAML, read corresponding section on MSDN: Path Markup Syntax.
The last thing to mention here, is that you don't have to specify or calculate concrete pixel values of your FormGeomtry. Grid makes this trick possible. So think of it as of percentage. I.e. 1 == full width or height. 0.5 == half of available width/hight and so on.
Hope this helps.