We Keep Coding

Create borderbrush "around the border path"

I'm trying to create a border with a gradient stroke around the border path, not around the full element but around the border itself.
A simple example of what I do not want is:
<Border BorderThickness="10" Width="100" Height="50">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Black" Offset="0.5"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
This creates a border that looks like:
What I to achieve wish is something like the image below. Notice that this achieved by blurring, I rather not do that as that would limit the what can be done - and more importantly: it would either blur all child elements, or I'd lose the ability to walk the visual tree with the border at the expected position. (Border would be a sibbling to its "content")

Dig a bit into shadow of border it looks closer
<Border BorderThickness="5" Width="100" Height="50" CornerRadius="5" BorderBrush="Gray">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Opacity="1" ShadowDepth="1" Color="Black">
</DropShadowEffect>
</Border.Effect>
</Border>
It will give you something like
Alternatively
you can draw Blured dummy border on the same place with the current one (Bind width and height), but lower in the markup, in that case UI will draw dummy border over your container border and you'll see bluring without harming the tree
<Border BorderThickness="0" Width="100" Height="50" CornerRadius="5" BorderBrush="Gray" x:Name="x">
<TextBox Width="70" Height="20">Some data</TextBox>
</Border>
<Border BorderThickness="5" Width="{Binding Width, ElementName=x}" Height="{Binding Height, ElementName=x}" CornerRadius="0" BorderBrush="Black">
<Border.Effect>
<BlurEffect Radius="10"></BlurEffect>
</Border.Effect>
</Border>

If you really want to be able to have a blurred gradient border i think you might have to go with something like this.
Create a trapeze-shape with your gradient:
Then copy this shape 3 times and apply some render-transformations to get the border shape
Apply a Blur Effect on the whole shape
I made all those screenshots directly from the WPF result.

How to bind a field to a gauge control?

I've added a WPF gauge control from this class https://github.com/JohanLarsson/GaugeBox but I'm not sure how to wire the control up to a field of type double degreeOutput declared in the code behind.
My aim is to bind degreeOutput to the gauge control and have the values from degreeOutput update the gauge accordingly.
The process I followed in setting up the control is:
1)Add the control to the user control's xaml layout and declare the namespace
xmlns:gauges="clr-namespace:Gauges;assembly=Gauges"
2)Set the value property to Value="{Binding degreeOutput}"
3)Run application, (but the gauge doesn't update in accordance with the
degree readings being output from degreeOutput)
Does anyone know what step I'm missing in binding the control to my degree field?
This is the xaml layout for the guage control:
<gauges:Gauge x:Name="Gauge"
Grid.Row="0"
Margin="13,18,134,134"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Marker="{Binding Marker}"
Maximum="{Binding Max}"
Minimum="{Binding Min}"
Placement="{Binding Placement}"
ShowLabels="{Binding ShowLabels}"
ShowMajorTicks="{Binding ShowTicks}"
ShowTrack="{Binding ShowTrack}"
TickFrequency="{Binding TickFrequency}"
Value="{Binding degreeOutput}" RenderTransformOrigin="0.5,0.5">
<gauges:Gauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.868"/>
<TranslateTransform/>
</TransformGroup>
</gauges:Gauge.RenderTransform>
<gauges:Gauge.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="0.10" Color="Red" />
<GradientStop Offset="0.10" Color="Green" />
<GradientStop Offset="0.90" Color="Green" />
<GradientStop Offset="0.90" Color="Red" />
<GradientStop Offset="1.0" Color="Red" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</gauges:Gauge.Background>
</gauges:Gauge>
And the code behind where degreeOutput is declared:
private double degreeOutput;

Generally speaking you can't bind to fields in WPF (see the answer to this SO question).
Try changing degreeOutput into a public property. This will be enough to feed the initial value through into the gauge control.
If you also want changes made by the gauge control to feed back into your property then the class containing the property must also implement INotifyPropertyChanged.

Height and Width with a menu

<Menu Height="50" Margin="0,0,0,0" HorizontalAlignment="Stretch" FlowDirection="RightToLeft">
<Menu.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFB3DDF2" Offset="1.0"/>
<GradientStop Color="#FFD6E9F4" Offset="0.0"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
This Menu will stretch no matter how long the page is and doesn't need to have a width.
<Menu Width="350" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Left" FlowDirection="RightToLeft" DockPanel.Dock="Bottom">
<Menu.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFD6E9F4" Offset="1.0"/>
<GradientStop Color="White" Offset="0.0"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
I want to do the same with this menu however it requires a height which means if i stretch the page down, the menu size will not stretch with the page. When I don't put a height into the code no menu bar appears. My question is how come I don't need a width for the menu bar but i need a height.
Thanks in advance

It is by design.
A menu bar is something that is assumed to stretch across the control it is contained in. That's why it doesn't need a width.
It needs a height because you can put any content inside it.
A stretch height wouldn't have a whole lot of meaning for a menu control, since it'd just be a large blank area of its background color, if WPF were to draw it for you.

Creating an image with rounded corners in a windows 8 metro application

I'm trying to create an animated playing card in a windows 8 metro application.
I found that by using 2 rectangles in xaml and with a transform and setting the z order I can get a decent looking animation. However when I try and add a child image ( for the face of the card ) to one of the rectangles I can't compile.
Is there any way to use a xaml image tag inside of a rectangle so that you can use the radiusX radiusY properties to round the corner?
Heres what Im using that allows the rotation ( both x and z planes )
<Rectangle x:Name="cardRectBack" Stroke="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" RadiusX="20" RadiusY="20" Tapped="cardRect_Tapped" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform x:Name="rotateCard"/>
</Rectangle.RenderTransform>
<Rectangle.Projection>
<!-- Apply a PlaneProjection to the image -->
<PlaneProjection x:Name="backYRot" RotationY="20"/>
</Rectangle.Projection>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFBB4444" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

You can use ImageBrush instead of LinearGradientBrush:
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/MyImage.png" />
</Rectangle.Fill>

Creating a reflection of a WindowsFormHost in wpf

I am very new to WPF and I am a bit stuck.
I'm trying to create a demo program that displays several embedded win forms applications. I'd like to add a reflection of the form, but most of the existing tutorials I've seen seen for image reflections do not work.
If anyone can point me in the right direction I would really appreciate it.
Here is the relevent XAML - the form control is added to the embedForm stack panel dynamically.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Name="inkBorder" Grid.Row="0" VerticalAlignment="Bottom" Margin="20"
Width="400" Height="500" CornerRadius="5" BorderThickness="4">
<Border.BorderBrush>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0.5,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gray" Offset="0" />
<GradientStop Color="#eeeeee" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel Name="EmbedForm" Height="100" Width="400" ></StackPanel>
</Border>
<Rectangle Grid.Row="1" VerticalAlignment="Top"
Width="{Binding ElementName=inkBorder,Path=ActualWidth}"
Height="{Binding ElementName=inkBorder,Path=ActualHeight}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#66000000" />
<GradientStop Offset="1.0" Color="#00000000" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<VisualBrush
Visual="{Binding ElementName=inkBorder}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
To clarify the question a bit...
I am mainly looking for a way to apply any visual transformations to controls like the WindowsFormHost and the WebBrowser control.
I've found that even simple transformations do not work with these, and I was wondering if there is any trick to treating these like standard visual elements or if it is a lost cause.

Transformations on WindowsFormsHost or WebBrowser won't work, because these controls don't use the WPF rendering engine, they use GDI+.
As far as I know, the only way to achieve what you want would be to capture the control's content as an image, and manually perform the transformation on the image using GDI+ functions... It's quite easy for a simple reflection, but it can get tricky for other kinds of transformation...