How to set a background to a textBlock that changes its content - background

Background
I'm trying to put a textBlock control at the bottom of the screen (with a small margin below it), and I also wish to set a background for it, so that no matter what is shown behind the textBlock, it will be easy to read.
On Android, you could simply set the background to it, and tell it to have the width and height to be WRAP_CONTENT, so that it will take only the space it needs, but I can't find a similar thing on WP8.
Current status
This is the xaml I've created:
...
<Grid >
<Image x:Name="fullScreenImage" Stretch="Fill"
Visibility="Collapsed" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom"
Margin="0,0,0,200" FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap"
Foreground="#ff000000" />
</Grid>
The problem
Since the textBlock doesn't have a background property, I had to use something that wraps it. However, since its content changes dynamically, I can't simply set a size for it.
The question
For now, I would like to simply set its background color.
I would also very appreciate if it would be possible to use a rounded corners rectangle for the background, or a 9-patch image.
How can I achieve setting a background for the textBlock?

The solution is very simple. Just set the HirizontalAlignment to Left. Hope this will work in your case.
<StackPanel HorizontalAlignment="Left">
<Border Background="#66FFFFFF">
<TextBlock/>
</Border>
</StackPanel>

According to this question (which is for Silverlight - but is xaml nonetheless), there is no way to explicitly set a background color for a TextBlock. Your best bet is to wrap your TextBlock in a Grid or Border.
If a Grid does not work, this article suggests a Border will do the trick:
A simple border will do, and by not setting its width and height
properties, it will shrink/grow based on the size of the TextBlock.

I've come up with the next solution , which works quite fine , but what i really would like to also have is a way to set a min font and max font size , so that if there is a single word , the font might need to be of some size, and if the text is too long , the font will be of a smaller size , all in a dynamic way.
code:
label.Text = label;
label.Measure(new Size(RenderSize.Width, RenderSize.Height));
border.Width = label.DesiredSize.Width + border.Padding.Left + border.Padding.Right + border.BorderThickness.Left + border.BorderThickness.Right;
border.Height = label.DesiredSize.Height + border.Padding.Top + border.Padding.Bottom + border.BorderThickness.Bottom + border.BorderThickness.Top;
and the xaml:
<Border BorderBrush="#ff000000" BorderThickness="2" CornerRadius="8" Visibility="Collapsed" Padding="5" Background="#bfff0000" Margin="10,0,10,200" VerticalAlignment="Bottom" x:Name="border">
<StackPanel>
<TextBlock FontSize="40" x:Name="pictureLabel" TextWrapping="Wrap" Foreground="#ff000000" />
</StackPanel>
</Border>

Related

Vertical alignment of content in TextBox (UWP)

does anyone know how to set text of textbox in vertical center of the box? I'm trying to make my universal app responsive, and textbox size adapts as it should, but I would need text in to be always in vertical center.
Thanks for all your time and help in advance!
My code:
<TextBox
x:Name="textBox"
Margin="10"
TextWrapping="Wrap"
Text=""
Grid.Column="1"
PlaceholderText="Website"
TextAlignment="DetectFromContent"
FontSize="20"
FontFamily="Segoe UI Light"
VerticalContentAlignment="Center"
d:LayoutOverrides="TopPosition, BottomPosition" />
There's a little more to it than that. Inside the template for TextBox are several elements. Including presenters for the placeholder text and a delete button etc.
You could add an attached property to target the embedded ScrollViewer and achieve most of what you want like this;
<TextBox ScrollViewer.VerticalContentAlignment="Center" ..../>
Except if you're using placeholder "watermark" text and stuff, you may have to make a copy of the template and vertical position everything in there.
Hope this helps, cheers.

How to fill an ellipse with different colors in Windows Phone 8.1 XAML?

am developing a WP8.1 app using xaml and C#.
i want to have a button or ellipse filled with multi colors like the below picture. How can i achieve this except using pie chart control?
I just need it in max height of 80 and width of 80
Can someone please help me out?
Thanks in advance
You use Arc shaped control to create this shape.
xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
<Grid>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF82ECDD" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="61" UseLayoutRounding="False" VerticalAlignment="Top" Width="294"/>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF38B5E4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="298" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
<es:Arc.RenderTransform>
<CompositeTransform Rotation="61.609"/>
</es:Arc.RenderTransform>
</es:Arc>
<es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF349AD4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="179" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
<es:Arc.RenderTransform>
<CompositeTransform Rotation="-119.36"/>
</es:Arc.RenderTransform>
</es:Arc>
</Grid>
You can convert a single ellipse into path and then remove one point in the path to make it a semicircle.
Have three semicircle rotated at proper angle to achieve something similar to the image above.

How to centre an item over a point in a Canvas?

I'm using a ListBox with its DataTemplate containing a Canvas. I then bind the Left/Top of the Grid containing that Canvas to move it to a certain point.
I want to then have the child Grid centred at the X,Y coordinates I've specified, where the size of the child Grid is variable based on its content. I was planning on achieving this by using a TranslateTransform to move the Grid by half of its width.
I can't see how I can set that TranslateTransform however as ElementName binding doesn't work within a DataTemplate. Any ideas how I can achieve this?
<ItemsControl ItemsSource="{TemplateBinding SomeCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<Grid x:Name="Container"
Canvas.Left="{Binding X}"
Canvas.Top="{Binding Y}"
Background="#88000000">
<Grid.RenderTransform>
<TranslateTransform X="{Binding ActualWidth, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}"
Y="{Binding ActualHeight, ElementName=Container, Converter={StaticResource NegativeHalfConverter}}" />
</Grid.RenderTransform>
<TextBlock Text="{Binding SomeValue}" FontSize="36" Foreground="White" />
</Grid>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
`
I think ElementName binding should work in the name scope of a DataTemplate, but I have seen people complaining about bindings not updating correctly when binding to ActualWidth/Height properties. Perhaps instead of doing the complicated setup you have you could just implement an attached behavior that takes a Point parameter and updates the Canvas.Left/Top properties whenever the parameter or size of the associated object (your grid) changes.
Looks like the fault wasn't with the binding itself, but with a feature that means the ActualWidth/ActualHeight properties aren't bindable. Thanks Filip.
To fix this I created a derived Grid with a couple of new dependency properties that I update in the SizeChanged events to have the ActualWidth/Height. I then use my DataTemplate as above, binding to these new DPs to translate and centre my Grid on a point. Seems to work a treat.
To move an object by half of its size you can use 2 rotations or scales: first is over 0.25,0.25 relative point, second is over the enter point 0.5,0.5. If you use rotations then angels are 180 degrees and -180 degrees. If you use scales then scale factors are -1,-1 and -1,-1.
Do not forget about RenderTransformOrigin property. And to apply two transforms you can apply them to two nested elements.

Create full screen XAML element

Just starting to play around with the Windows 8 SDK.
Trying to create a TextBox that fills up the whole screen. Unfortunately at different resolutions the TextBox does not fill up the screen.
How do I bind the width and height of the TextBox to the width and height of the screen?
Thanks!
Don't set the width and height of the TextBox in the xaml. Instead, set HorizontalAlignment and VerticalAlignment to Stretch.
I got it to bind properly like this:
<Grid x:Name="MyGrid">
...
</Grid>
...
<TextBox x:Name="MainContent" Height="{Binding ActualHeight, ElementName=MyGrid}" HorizontalAlignment="Right" Width="{Binding ActualWidth, ElementName=MyGrid}" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF7A7A7A" FontSize="18.667"><TextBox>
Which is binding it to the size of the grid in the layout. This works by binding the Height and Width properties of the TextBox to the ActualHeight and ActualWidth values of the Grid. The ElementName of the binding links to the grid's x:Name property.
Try binding to Window.Current.Bounds. It has Height, Width, X, and Y among other properties.

Augmented reality with kinect

I am doing one project on kinect with windows SDK. I am trying to display the image on skeleton shoulder with the following code.
**
Xaml code
<Canvas Margin="250,0,0,0" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}" Background="Green" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<Image MaxHeight="600" MaxWidth="950" x:Name="PART_KinectVideo" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}" />
<Canvas>
<Image RenderOptions.BitmapScalingMode="HighQuality" Visibility="{Binding Path=Showcamera, Converter={StaticResource BVC}}"
RenderOptions.EdgeMode="Aliased" Canvas.Top="60" Canvas.Left="350" Stretch="Uniform" x:Name="Jewel"/>
</Canvas>
Code Behind
var j1p = nui.MapSkeletonPointToDepth(closestSkeleton.Joints[JointType.ShoulderLeft].Position,DepthImageFormat.Resolution640x480Fps30);
Canvas.SetLeft(Jewel, j1p.X+90);
Canvas.SetTop(Jewel, j1p.Y-280);
by getting the j1p values i am trying to set the left and top position of the canvas for the Jewel image object.
Problem with the code is :
This is not correctly placing the image. When the user moves in the screen the image also moves out of body with left and right direction as user moves.
I need the image should be set to the position even when the user moves right or left.
How should I alter the code or is there any sample available to set the image in particular position of the kinect joints?
Maybe try this:
var left = (double)image.GetValue(Canvas.LeftProperty)
left += 90;
image.SetValue(Canvas.LeftProperty, left);
I wrote an app using that code and everything worked fine to me:)