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>
Related
I'm having an issue in my ASP.NET WPF project, which a image inside a border is overflowing the border limits. Follow bellow my code:
<Border CornerRadius="20" Grid.Column="0" Grid.Row="0" >
<Button HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Image Source="{Binding ImagePath}" />
</Button>
</Border>
Actually I found a workaround for this different and more simple than
How to make the contents of a round-cornered border be also round-cornered?
Here is my solution:
<Border CornerRadius="20" Grid.Column="0" Grid.Row="0">
<Button HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
</Button>
<Border.Background>
<ImageBrush ImageSource="{Binding UploadImage}"/>
</Border.Background>
</Border>
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 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>
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>
I am trying to make a form with the top edges rounded in WPF. I have successfully done that part, although I have a canvas as a header on the form and the background image inside of it covers the rounded edges on my border. Is there a way to clip the edges from this canvas if it goes outside of the border? I tried sending the border to the back and set each element to clip although that does not work. If I set the border to the front then the border just sits on top. Can anyone offer some assistance?
Here is how I am creating the form with rounded corners-
<Border BorderBrush="Silver" BorderThickness="1" Height="645" HorizontalAlignment="Left" Name="mainBorder" VerticalAlignment="Top" Width="867" CornerRadius="10, 10, 0, 0" SnapsToDevicePixels="False" UseLayoutRounding="False" ClipToBounds="False" Background="{StaticResource FormGradient}">
<Canvas Height="43" Name="canvas1" Width="794" VerticalAlignment="Center" Margin="0,0,0,320">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/canvas-nav-bar.png" Stretch="None" TileMode="Tile" Viewport="0,0,106,92" ViewportUnits="Absolute" />
</Canvas.Background>
<Rectangle Canvas.Left="-36.5" Canvas.Top="-25" Height="11" Name="headercanvasFooter" Stroke="{x:Null}" Width="867" Fill="White"></Rectangle>
</Canvas>
</Border>
<Canvas Height="118" HorizontalAlignment="Left" Name="headerCanvas" VerticalAlignment="Top" Width="867" ClipToBounds="True" DataContext="{Binding}" IsItemsHost="False">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/Ps-HeaderSlice.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,27,158" ViewportUnits="Absolute" />
</Canvas.Background>
<Image Canvas.Left="698" Canvas.Top="6" Height="64" Name="headerLogo" Stretch="None" Width="163" Source="/WPFPROJECT;component/Images/WPFPROJECTImage.png" HorizontalAlignment="Center" IsHitTestVisible="False" StretchDirection="Both" VerticalAlignment="Center" Visibility="Visible" SnapsToDevicePixels="False" UseLayoutRounding="True" IsManipulationEnabled="False" ClipToBounds="False" />
</Canvas>
You can use OpacityMask on your inner Canvas to make the edges appear transparent
<Border x:Name="border" CornerRadius="20" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Background="Red" Width="50" Height="50" Opacity="0.5">
<Canvas.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Fill="Black" Stroke="Black" StrokeThickness="1" RadiusX="20" RadiusY="20"
Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.OpacityMask>
</Canvas>
</Border>