Develop Reference

Rounded edge border is clipped by textbox on top of the border

My Rounded edge border is clipped by textbox on top of the border
<Grid Background="AliceBlue">
<Border Margin="50,0,50,0" VerticalAlignment="Center" BorderThickness="2" BorderBrush="Blue" CornerRadius="10">
<TextBox Text="2345678" IsReadOnly="True" BorderThickness="0" Background="Transparent"/>
</Border>
</Grid>
If the text is not in focus, it perfectly shows the rounded edge border.
How can I have the border to be intact, even when focused?

The easiest fix is play with margins, this doesn't make the text smaller (but you might have the impression it is, because the text is a bit further from the border). Below is a screenshot without and with margin.
<Border Margin="50,0,50,0" VerticalAlignment="Center" BorderThickness="2"
BorderBrush="Blue" CornerRadius="10">
<TextBox Text="2345678" IsReadOnly="True" BorderThickness="0"
Background="Transparent" Margin="4,1"/>
</Border>
The more advanced scenario (but still quite simple) is changing the TextBox's style by editing the template. You can start from the default template as guidance. As your controls are readonly, you can simply remove the PointerOver and Focused VisualState Storyboards content, or at least the animations on the BorderElement.
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Focused" />

How to center Content in a Button Template and keep mouse events in empty area

I am using a Button Template to customize the look and feel of my buttons like so:
<ControlTemplate TargetType="Button">
<Border x:Name="Border" CornerRadius="6" BorderThickness="1">
<ContentPresenter Margin="3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Content"/>
</Border>
</ControlTemplate>
I want to center horizontally and vertically the Content, but when I do it the "empty" areas of the Button don't react to the Mouse. When I use Stretch the entire Button behaves alright, but the Content is aligned top-right.
How do I do both?

To make whole area of a Border hit test visible you need to initialise its Background property with some Brush. Can be even Transparent which will have same visual effect as default null.
<Border ... Background="Transparent" />

InkPresenter draw only in transparent area

I have an InkPresenter and this image with a transparent background. I want my strokes to be drawn only in the transparent area and ignore the black border of the shape. How is it possible?

here is an example using WPF, same applies to InkPresenter, you can use InkPresenter.Clip property to define the clip region
<Border BorderBrush="Green"
BorderThickness="1"
Width="200"
Height="200">
<Grid>
<InkCanvas>
<InkCanvas.Clip>
<EllipseGeometry RadiusX="98"
RadiusY="98"
Center="100,100" />
</InkCanvas.Clip>
</InkCanvas>
<Ellipse Stroke="Blue"
StrokeThickness="2" />
</Grid>
</Border>
result

I was able to solve my problem using Opacity Mask:
<InkPresenter.OpacityMask>
<ImageBrush ImageSource="{Binding ImageMask}" />
</InkPresenter.OpacityMask>

Increasing tap radius of bing maps pushpin?

I have a custom pushpin that I use to display information on the map when it is tapped.
However, it is rather tough to tap exactly on the pushpin (I can't increase the size of the pushpin anymore, It would look very ugly)
Is there a way to increase the tap radius of the pushpin?

I agree with #Depechie, but here is something that works for what you need. You can change the ControlTemplate of the pin to match what you need. Here is the existing Template for the Bing Maps PushPin but with a huge margin.
<ControlTemplate x:Key="PushpinControlTemplate1" TargetType="Maps:Pushpin">
<Grid x:Name="ContentGrid" Margin="100" Background="Transparent">
<StackPanel Orientation="Vertical">
<Grid Background="{TemplateBinding Background}" HorizontalAlignment="Left" MinHeight="31" MinWidth="29">
<ContentPresenter HorizontalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" Margin="4"/>
</Grid>
<Polygon Fill="{TemplateBinding Background}" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left"/>
</StackPanel>
</Grid>
</ControlTemplate>
Then you just need to use that template
<Maps:Pushpin Background="{StaticResource PhoneAccentBrush}" Template="{StaticResource PushpinControlTemplate1}"/>
You'll want to play with the position of the pin so that it actually points to the proper location.

I would guess fire up Photoshop and create more transparant image content around the pushpin...
But be sure to check the position of the pushpin again, because if the width and height changes, the midpoint changes.

WPF semi transparent button to control MediaElement

I am making WPF application that plays a video.
I use MediaElement, I wish to add Play/Pause button, I want that image button to be in shape of play, and only the image i put on the button will be shown. the rest to be transparent.
e.g: put a play triangle image on a rectangle button will only show the triangle image.

You're going to have to "make your own", fortunately it's not that hard, here is a working example (doesn't handle mouse hovering though):
<Grid Background="Black">
<Button HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
<Path Data="M 0,0 L 15,10 L 0,20" Fill="Green"/>
</Button>
</Grid>
The grid is only here to show that only the arrow is actually drawn, and the Path thing is vectorial data to draw a Play button.
It looks like this: