Develop Reference

Hide half of border with grid

How hide half of brush with opacity mask with no path element? I want to make site "transparent".
<Border Height="32" Width="32" x:Name="b1" CornerRadius="50" BorderThickness="3" BorderBrush="Red">
</Border>
<Grid Height="32" Width="16" HorizontalAlignment="Right" x:Name="hideHaf" Background="Blue" >
</Grid>
Default:
I want:

You could simply put your border insize the grid, and use the default ClipToBounds="True" property of the grid to clip the border like this:
<Grid Height="32" Width="16" HorizontalAlignment="Right" x:Name="hideHaf">
<Border Height="32" Width="32" x:Name="b1" CornerRadius="50" BorderThickness="3" BorderBrush="Red"/>
</Grid>
Which produces:

Just in case your primary goal is to draw a vertical half transparent circle. You could do it this way instead of using the Border:
<Path Width="16" Height="32" Stretch="Fill" Data="M5,0 A5,5,0,0,0,5,10" Stroke="Red" StrokeThickness="3" HorizontalAlignment="Left" VerticalAlignment="Top"/>

How can I set border to Image control in UWP XAML

How can I apply a rounded border to Image control in UWP xaml page so that this Image will also have rounded corners?
I tried
<Border BorderBrush="White"
BorderThickness="1"
HorizontalAlignment="Center"
Height="183"
VerticalAlignment="Top"
Width="316"
Canvas.ZIndex="1">
<Image x:Name="carImage"
Height="183"
VerticalAlignment="Top"
Width="306"
HorizontalAlignment="Center"
IsTapEnabled="False"
IsRightTapEnabled="False"
IsHoldingEnabled="False"
IsDoubleTapEnabled="False"
Stretch="UniformToFill"
Margin="-1,-1,9,-1"/>
</Border>
But without success.
Is there any way to do this or am I so blind I can't see an obvious solution?
Thank you in advance.

This should work:
<Border BorderBrush-"White"
BorderThickness="1"
CornerRadius="5"
... >
<Border.Background>
<ImageBrush ImageSource="image.png" .../>
</Border.Background>
</Border>

How to make circle button in XAML and C# with customize style?

I am new in XAML and I have a problem with my button in my simple game.
I make a circle button and I need to change it's color, but my button doesn't give the default style of a button like animate, pointer change on hover it, click animate and etc, also it's color doesn't change.
Here is my XAML:
<Page.Resources>
<SolidColorBrush x:Key="RedColorXX" Color="Red" />
</Page.Resources>
<Button x:Name="btnRed" Style="{StaticResource btnColor}" Content="Red" HorizontalAlignment="Left" Height="228" Margin="62,261,0,0" VerticalAlignment="Top" Width="228" Background="#FFCA6969" Click="colors_Click" FontSize="0.01" BorderBrush="Azure" Grid.Column="1" >
<Button.Template >
<ControlTemplate TargetType="Button" >
<Grid >
<Path Stretch="Uniform" UseLayoutRounding="False" Fill="#FFCA6969">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
and the color change code that dosen't work !
btnRed.Background = (SolidColorBrush)Resources["RedColorXX"];

For example I turn your fill="#FFCA6969" into yellow:
<Button x:Name="btnRed" Content="Red" HorizontalAlignment="Left" Height="228" Margin="100,35,0,0" VerticalAlignment="Top" Width="228" Background="#FFCA6969" Click="colors_Click" FontSize="0.01" BorderBrush="Azure" >
<Button.Template >
<ControlTemplate TargetType="Button" >
<Grid >
<Path Stretch="Uniform" UseLayoutRounding="False" Fill="Yellow">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

Round ScrollViewer in XAML

What I need is a rounded Scrollviewer. I tried to put it inside a Border with corner radius:
<Border Height="160" Width="160" CornerRadius="80" BorderThickness="5" BorderBrush="Red">
<ScrollViewer Style="{StaticResource ZoomViewer>
<Image Source="Assets/img1.jpg"/>
</ScrollViewer>
</Border>
but the result shows that it doesn't work this way:
so how can I make it round?

You should be using an ImageBrush like this as the Background of the Border, and then wrap the Border within a ScrollViewer.
<ScrollViewer Style="{StaticResource ZoomViewer>
<Border Height="160"
Width="160"
CornerRadius="80"
BorderThickness="5"
BorderBrush="Red">
<Border.Background>
<ImageBrush ImageSource="Assets/img1.jpg" />
</Border.Background>
</Border>
</ScrollViewer>

circular border over image is not uniform

I am trying to show an image with circular border of some color for windows phone 8.1 silverlight project, however when applying the clip to it, the image overlaps on the edges of the border, is there any way to achieve a uniform border over the image? using the below xaml template
Here is my xaml
<Grid Background="Transparent" Width="200" Height="200">
<Grid.Clip>
<RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
</Grid.Clip>
<Border x:Name="Border1"
BorderThickness="4"
BorderBrush="Red"
Background="Green"
CornerRadius="100">
<Grid Background="Yellow">
<ContentPresenter>
<Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg"
Stretch="UniformToFill">
</Image>
</ContentPresenter>
</Grid>
</Border>
</Grid>
Please check the below output image
https://onedrive.live.com/redir?resid=2F14B4EE5F346B6F%215535

I always tend to use Ellipse, so try something like this ( the stroke property is the border you want around your circle )
<Ellipse Width="50" Height="50"
Stroke="LawnGreen"
StrokeThickness="5">
<Ellipse.Fill>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/SquareTile71x71.png" />
</Ellipse.Fill>
</Ellipse>

I was able to make it work by removing the inner border and adding another border as a sibling of the inner Grid
<Grid Background="Transparent" Width="200" Height="200">
<Grid.Clip>
<RectangleGeometry Rect="0,0,200,200" RadiusX="100" RadiusY="100"/>
</Grid.Clip>
<Grid Background="Yellow">
<ContentPresenter>
<Image Source="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" Stretch="UniformToFill"/>
</ContentPresenter>
</Grid>
<Border x:Name="CircularBorder" BorderThickness="10" BorderBrush="Red" Background="Transparent" CornerRadius="100" IsHitTestVisible="False"/>
</Grid>