I have a Canvas /RelativePanel which I'm using as background "image" in my uwp app.
How can I position a child in the canvas at the bottom? There is no canvas.bottom AP like in wpf. I also didn't find any proper attached property in the relativepanel to position the child at the bottom of the relative panel.
<RelativePanel>
<ContentControl ContentTemplate="{StaticResource AsterioidTemplate}" />
<Canvas x:Name="mountain_to_bottom" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Path Width="126.389" Height="326.227" Canvas.Left="272.433" Canvas.Top="28.3291" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
</Canvas>
</RelativePanel>
How can I position a child in the canvas at the bottom?
Canvas is a layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas in uwp.You control the positioning of elements inside the Canvas by specifying x and y coordinates.Since canvas is absolute positioning , child content is not constrained by the bounds of the panel, so we may not define the child at the bottom of canvas directly. But we can try to calculate the position manually to let the child position at the bottom of canvas. For example, the following demo can show the image at the bottom of the canvas.
XAML Code
<Canvas Background="Pink" x:Name="mountain_to_bottom" Height="600">
<Path x:Name="pathelement" Width="126.389" Height="326.227" VerticalAlignment="Bottom" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
</Canvas>
<Button x:Name="btnbottom" Click="btnbottom_Click" Content="to bottom"></Button>
Code behind
private void btnbottom_Click(object sender, RoutedEventArgs e)
{
double canvasheight = mountain_to_bottom.ActualHeight;
if (pathelement.ActualHeight < canvasheight)
{
double top = canvasheight - pathelement.ActualHeight;
pathelement.SetValue(Canvas.TopProperty, top);
}
}
I also didn't find any proper attached property in the relativepanel to position the child at the bottom of the relative panel.
Inside relative panel, elements are positioned using a variety of attached properties. Relative panel provides RelativePanel.AlignBottomWithPanel attached property for position the child at the bottom of the panel.
<RelativePanel BorderBrush="Gray" BorderThickness="10">
<Path x:Name="pathelement" RelativePanel.AlignBottomWithPanel="True" Width="126.389" Height="326.227" VerticalAlignment="Bottom" Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Stroke="#FF23232D" Fill="#FF23232D" Data="F1 M 398.155,353.889L 273.099,186.024L 315.298,28.9958L 398.155,353.889 Z "/>
</RelativePanel>
If canvas and relative panel can not meet your requirements well you can consider about other containers. What container to use depend on your layout. For example, relativePanel is a layout container that is useful for creating UIs that do not have a clear linear pattern; that is, layouts that are not fundamentally stacked, wrapped, or tabular, where you might naturally use a StackPanel or Grid. More details please reference Layout panels.
Related
My code will draw a graphic and, before the paint event, I need to set the size of element containing the graphic. In part, this comes from a value in an XAML file:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
...
</Grid>
During the view initialization, I'm hoping to be able to modify the graphic width based on some other factors, but I need the height value, from XAML.
At a breakpoint, I can view the various View values, and at this point ActualHeight and ActualWidth are still 0. I don't see anything else I could use.
Is there another event, coming before paint, that I could use ?
The answer is to use SizeChanged event.
In XAML, for example:
<skia:SKXamlCanvas
x:Name="EICanvas"
SizeChanged="OnSizeChanged" />
And in code-behind:
private void OnSizeChanged (Object sender, SizeChangedEventArgs e)
{
var newH = e.NewSize.Height;
var oldH = this.ActualHeight; // in pixels
...
}
My idea is to create custom Tile control which is used as Live Tile (rendering it to a bitmap image and use as tile background) and within my app in a LongListSelector. By using the same control for both scenarios it ensures that it will look identical.
Here a short sample of my custom Tile control:
public class Tile : ContentControl
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
Content = GetTileLayout();
}
private Grid GetTileLayout()
{
double width = 336;
double height = 336;
StackPanel panel = new StackPanel();
TextBlock contentTextBlock = new TextBlock();
// ...
Grid layoutRoot = new Grid();
layoutRoot.Background = new SolidColorBrush(Colors.Red);
layoutRoot.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
layoutRoot.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
layoutRoot.Width = width;
layoutRoot.Height = height;
layoutRoot.Children.Add(panel);
layoutRoot.Measure(new Size(width, height));
layoutRoot.Arrange(new Rect(0, 0, width, height));
layoutRoot.UpdateLayout();
return layoutRoot;
}
}
If I want to use it in the LongListSelector then it needs to be scaled down from 336x336 to 200x200 pixels. I tried it with a simple ScaleTransform but the result is not the same as I expected.
<phone:LongListSelector x:Name="ItemList" ItemsSource="{Binding Items}" LayoutMode="Grid" GridCellSize="222,222">
<phone:LongListSelector.ItemTemplate>
<StackPanel Margin="12,12,0,0" Background="Blue">
<DataTemplate>
<common:Tile VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<common:Tile.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</common:Tile.RenderTransform>
</common:Tile>
</DataTemplate>
</StackPanel>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
This is the result:
The red rectangle is my custom Tile control with the ScaleTransform. After the transformation it should be a square again, scaled down from 336x336 to 168x168 (just an example). In the image above the height is correct but the width is too small.
It's strange because if I change the size of my custom Tile control to 200x200 pixels and use the same ScaleTransform with factor 0.5 it will be scaled down correctly.
Your GridCellSize is killing the transform. Make it bigger, try (400, 400). Also get rid of that StackPanel.
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderBrush="HotPink" BorderThickness="1,1,1,1" Tap="Border_Tap" HorizontalAlignment="Left" VerticalAlignment="Top">
<Custom:Tile RenderTransformOrigin="0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Custom:Tile.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Custom:Tile.RenderTransform>
</Custom:Tile>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
Simpel question, I have a windows phone page that contains a scrollviewer with inside it an image, a textblock and a richtextbox.
Now when the user starts scrolling I want to keep the textblock in view on top when the image has scrolled outside the page.
So the effect is, user starts scrolling upwards, everything scrolls upwards, when the image is outside the page, the textblock stays at the top of the page but the richtextbox keeps scrolling upwards.
Any thoughts?
Here is a way to reach this result:
First, the layout. I've set a grid, with two rows. The first is empty, and will host the header when we need to freeze it. The second row contains the scrollviewer.
Inside the scrollviewer, I've put the controls in a grid, but you can use whatever container suits you.
<ScrollViewer Grid.Row="1"
Margin="0"
Padding="0"
x:Name="ParentScroll"
ManipulationMode="Control"
MouseMove="ParentScroll_MouseMove">
<Grid x:Name="ChildGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Source="Picture.jpg" Grid.Row="0"/>
<TextBlock Text="Header" Grid.Row="1" x:Name="TextHeader" />
<RichTextBox Grid.Row="2" x:Name="RichText">
<Paragraph>
<Bold>RichTextBox</Bold>
<!-- More stuff -->
</Paragraph>
</RichTextBox>
</Grid>
</ScrollViewer>
I use the MouseMove event to be notified of the scrolling event. You can also dig into the template, extract the ScrollBar control, and subscribe to the ValueChanged event, as described here: http://social.msdn.microsoft.com/Forums/wpapps/en-US/81fcd34e-6ec9-48d0-891e-c53a53344553/scrollviewer-synchronization
Note that you need to set ManipulationMode to Control or the position of the controls won't be updated at a smooth rate. I guess it's due to some internal optimization.
In the code behind, I use the TransformToVisual method to compute the relative position of the controls to the ScrollViewer. This way, I can know when the header goes out of view. When it does, I remove it from the child grid, and put it outside of the ScrollViewer, in the parent grid. When the top of the RichTextBox goes out of view, I put the header back into the ScrollViewer:
private void ParentScroll_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (Grid.GetRow(this.TextHeader) == 1)
{
var generalTransform = TextHeader.TransformToVisual(ParentScroll);
var childToParentCoordinates = generalTransform.Transform(new Point(0, 0));
if (childToParentCoordinates.Y < 0)
{
this.ChildGrid.Children.Remove(this.TextHeader);
this.ParentGrid.Children.Add(this.TextHeader);
Grid.SetRow(this.TextHeader, 0);
}
}
else
{
var generalTransform = RichText.TransformToVisual(ParentScroll);
var childToParentCoordinates = generalTransform.Transform(new Point(0, 0));
if (childToParentCoordinates.Y > 0)
{
this.ParentGrid.Children.Remove(this.TextHeader);
this.ChildGrid.Children.Add(this.TextHeader);
Grid.SetRow(this.TextHeader, 1);
}
}
There may be less-hacky ways to reach the same results, but this solution seems to work smoothly in the emulator.
I've found a working solution myself... the complete detail is available on my blog here... it contains also the link to my demo project on GitHub.
The trick was to get hold of the VerticallScrollBar inside the ScrollViewer and to set the ManipulationMode to Control to get enough feedback on the UI thread.
With the scroll offset information of the scrollbar we than animate the specific ui element we want to keep in view.
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.
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.