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.
Related
I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.
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'm working with a toggle button and rather than show text I want to show an image so I have this:
<ToggleButton Grid.Column="1" IsChecked="true" MinWidth="50" MinHeight="0" BorderThickness="0" HorizontalAlignment="Center">
<Image Source="ms-appx:///Assets/Icons/phonebutton.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</ToggleButton>
I have the transform to make the image a bit smaller so it's "inside" the button instead of filling it.
However, no matter what I do the button has a large padding around the image, even though the image itself has no margins or padding. I've set margin=0 on everything but the ToggleButton insists on putting space around the image, so the button is larger than it needs to be and cuts off inside the grid row it's in (which has a height="*")
I want the toggle button to "shrink" to fit in the row but still show the full image inside ...
while typing this the autosuggest found this link ToggleButton does not fill the area(windows phone) and by adding the style PhoneTouchTargetOverhang it does look better but then cuts off the image at the bottom unless I add negative padding to the togglebutton.
Anyone have any idea what I'm doing wrong?
Is there any way to disable it?
I have added the following margin to an image of 512x512:
<Image Source="/Assets/award4.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="-100,0,-100,0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
And it fits centered
I try to understand how windows phone viewport control Bounds work.
So i can give
viewport.Bunds = new Rect(x,y,width, height);
but what that bound stand for is it a scrollable area in the viewport.
Can anyone give me a working simple example of it cause whenever i try to use this parameter i can't scroll in viewport whatsover
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<ViewportControl Name="tuzik" Bounds="0,0,300,400" Margin="66,117,20,41" >
<Canvas Name="canvas">
<Image Name="TestImage" Source="Assets\testimage.jpg"
HorizontalAlignment="Left" VerticalAlignment="Top"
Canvas.Left="-379" Canvas.Top="-769" Stretch="Fill" />
</Canvas>
</ViewportControl>
<Rectangle x:Name="rect" Width="300" Height="400" Margin="60,111,63,0" Stroke="Aqua" />
</Grid>
I believe your problem is the Canvas within the ViewportControl. Canvas does not expand to fill the ViewportControl and will not expand to contain the contents, either. You have to set a Width and Height on the Canvas.
(At least, that's how I have mine setup.)
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.