This is an interesting question.
For the first picture, in XAML, we can easily draw it with a Border:
Border Width="10" Height="10" CorderRadius="0,10,0,0" Background="Red"
The remaining part of the area is transparent.
However, How can I draw the second picture with reverse colors, using Border, while keep the uncolored area transparent?
Thanks.
I can do it now，thank you, I am so happy :)
You will have to create a path
<Path Data="M0,0 L20,0 L19.4838,0.006531 C8.84821,0.275986 0.275986,8.84821 0.006531,19.4838 L0,20 z" Fill="Red" Height="10" Stretch="Fill" Width="10"/>
You can achieve this using Blend. Draw a rectangle and an ellipse like this
Select both the ellipse and the rectangle together (but make sure you select ellipse first and rectangle second). Then right click (Combine -> Subtract).
Related
I've searched accross the Internet to solve the follow problem, but unfortunately I didn't found any working solution.
My goal is to have an ImageBrush with an image x-repeating at the bottom of the object which is using the brush. Additional the brush shall have a transparent margin, so the repeated Images shall not "touch" the container's border.
Currently I'm able to repeat an image x- and y-axis (and there I'm stuck ...). That for I use the following XAML:
<ImageBrush
x:Key="MandatoryIndicator"
ImageSource="image.png"
Stretch="None"
TileMode="Tile"
ViewportUnits="Absolute"
Viewport="0,0,16,16"
AlignmentY="Bottom"/>
And it Looks like this:
And I like to have it like this:
If you know how I have to modify my brush XAML, that would be great c[~] =)
You may use a VisualBrush with two nested elements like shown below. The outer Border (or some other outer element) is necessary for the transparent margin.
<VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Bottom">
<VisualBrush.Visual>
<Border Background="Transparent"
Width="{Binding ActualWidth,
RelativeSource={RelativeSource AncestorType=FrameworkElement}}">
<Rectangle Margin="10" Height="16">
<Rectangle.Fill>
<ImageBrush ImageSource="image.png" TileMode="Tile"
Viewport="0,0,16,16" ViewportUnits="Absolute"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</VisualBrush.Visual>
</VisualBrush>
I want to write text inside a circular shape in uwp or xaml
below are the syntax
<Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="#F2794B" Height="47" Width="47" StrokeThickness="5" />
image given below
You cannot. Instead create a Grid the same size as the Ellipse and put the Ellipse and a TextBlock into it.
I am displaying a clipped image (round shape) inside a KinectTileButton. The problem is that I don't know how to change the Selected behavior. By default, when the button gets clicked, the entire area gets darker and I get to see the corners of the square. I want to change the Selected state to transparent so I don't see the corners of the square (as I have a circle inside).
<k:KinectTileButton Background="Transparent" Width="500" Height="500" Click="ContactClick">
<Grid Height="500" Width="500">
<Image Source="/Namespace;component/Resources/Images/Image.png" Width="450" Height="450" x:Name="ContactStream">
<Image.Clip>
<EllipseGeometry RadiusX="220" RadiusY="220" Center="225,225"/>
</Image.Clip>
</Image>
</Grid>
</k:KinectTileButton>
I have a question on Windows Phone 7 XAML programming.
<StackPanel Orientation="Vertical" Width="110">
<Canvas Margin="0">
<TextBlock Text="{Binding Menesis}" Foreground="{Binding MyColor}"></TextBlock>
</Canvas>
<Canvas Margin="0,12,0,0">
<TextBlock Text="{Binding Datums}" Foreground="{Binding MyColor}" FontSize="85" HorizontalAlignment="Center" TextAlignment="Center" />
</Canvas>
<Canvas Margin="0,105,0,0">
<TextBlock Text="{Binding Nedelas_diena}" Foreground="{Binding MyColor}" />
</Canvas>
</StackPanel>
How to make TextBlock (Binding Datums) text centered? Currently it is aligned at right side and
HorizontalAlignment="Center"
or
TextAlignment="Center"
doesn't work.
If you have your TextBlock in a Canvas you will have problems with the alignment as the TextBlack will be placed at 0,0 (top left) inside the canvas control and (unless you set the width explicitly) will be stretched to fit the text contained. This basically means your text will always be left aligned.
The Canvas control should only be used when you need to set the exact position of the contained elements. If this is not the case then use another container such as a Grid, StackPanel or even just a ContentControl.
Remove the Canvas from your xaml and it should work.
To clarify HorizontalAlignment vs. TextAlignment:
If you have a ContentControl that is 400px wide and you add a TextBlock to it that is set to be 200px wide with text content that is 100px wide, then the following is true:
Setting the HorizontalAlignment to Center will align the TextBlock (200px wide) to the middle of the ContentControl but the text will still be left aligned within the TextBlock. This means the text will be offset 100px from the left.
If just the TextAlignment is set to Center then the TextBlock will be left-aligned but the text inside will be centered. This means that the text will be offset 50px from the left.
In my opinion the best practise here is not to set any widths and just set the TextAlignment property. This will mean (for most containers) the TextBlock will be stretched the entire width of the container and the text within aligned appropriately.
Instead of using stack panel and canvas . either u can use Grid. If you are using grid you can point out the exact position where you need to place the control.
for eg,
<----- Height -->
like this. More over there is no need to use canvas. The canvas container is using mainly in case of game design purpose.
I am trying to create a simple image viewer in silverlight.
my code is this:
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Margin="0" Padding="0" Width="300" Height="300">
<Canvas Width="600" Height="400" Margin="0">
<Image Source="/MapViewer;component/Images/imageFileName.jpg" Stretch="None" Margin="0,0,90,5"></Image>
</Canvas>
</ScrollViewer>
(I used the Canvas because in the future I would like to paint more fixed elements on the image, such as lines, polylines, etc)
This code is working ok except the fact that the ScrollViewer cuts the image: say the image is 800x600, than I can view around 700x500. I dont know if that was clear enough, so I will add a picture:
(this is the original image)
(and this is the picture, as viewed in my application)
As you can see, I cannot view the bottom right corner of the image... can somebody please tell me how to fix this?
It is not the scroll viewer cropping your image, it is the fixed-size canvas where you placed it. If you want your entire image to be visible you need to set the canvas size to be exactly the same size as your image.