I created a templated usercontrol from a button in order to use common states etc. What I dont get is how to scale a canvas inside the template. I created a little drawing with lines but they do not scale/transform with the control when I use it.
Most interesting would be if that is possible using xaml element binding (I am playing with SL3).
Regards Mario
I would use a Grid and set it's Height and Width to Auto. If yo addi items to the rows and columns and they are all set to stretch the stuff nside the grid will automatically resize. Not sure if that is what you are asking but that is what comes off the top of my head.
Related
I try my first app in uwp vb.net i want to draw a few polygones.
Which control to use ?
The target is to draw a timer which each part minutes seconds are shown with seven segment.In windows form i used a picture box
Thanks
In which xaml controls you can draw
In UWP, we often use Canvas to defines an area within which you can explicitly position child objects. You could use Windows.UI.Xaml.Shapes to draw graph. It contains Line Ellipse and Rectangle etc. For more detail please refer this document.
The documentation for the Grid class states:
Starting in Windows 10, Grid defines new border properties that let you draw a border around the Grid without using an additional Border element. The new properties are Grid.BorderBrush, Grid.BorderThickness, Grid.CornerRadius, and Grid.Padding.
Does this make the Border class redundant? Why would I ever want to use a Border if I can do the same thing with a Grid and lay out children in a grid fashion if I so choose?
EDIT
I generally agree with Bart's answer, but there's a few things I would like to talk about.
Firstly, other layout controls (like StackPanel) do indeed have Border-like properties such as BorderBrush, BorderThickness and CornerRadius, so Grid isn't the only layout control which gets these new perks. But they are not attached properties provided by the Border class (or have anything to do with the Border class at all).
Secondly, I, too, thought that it would be a overkill to use complex layout control like Grid if I only wanted to add a border to a simple control like an image. But surely these layout controls would be optimized such that any impact to layout rendering speed would be negligible if they only contained a single child without any special layout constraints. So using a Grid instead of a Border shouldn't affect performance when it only has a single child.
Lastly, I decided to find out just how Grid achieves the border appearance. I created a simple Page containing a Grid with a border and a single Rectangle child, like this:
<Grid Background="Red" BorderBrush="Blue" BorderThickness="10">
<Rectangle Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="Yellow"/>
</Grid>
with the following rendering:
Upon inspecting the live visual tree, the Grid class does not add any additional elements to the visual tree to make the border appearance:
I suspect whatever mechanism it uses to create the border appearance would be the same as what the Border control does (maybe it creates an additional Visual in the composition layer).
So I'm not really convinced that the "simpler" Border control would be better to use because it looks like the Grid control is already quite performant. I can't see any evidence for the Grid control adding any extra overhead to the visual tree (when compared to what a Border would do to achieve the same effect).
So far the only reason I can think of why I should use Border instead of Grid is to express meaning. It's obvious what the Border control does, adds a border around a single element. Grid is a layout control used to lay out child elements within a grid (which, as it so happens, has the ability to add a border around its children too as an added bonus).
Your first question designing your UI should be do I need a Grid or another layout control (StackPanel, RelativePanel, Canvas, ...) based on the specific behavior of each control (see MSDN). Note that next to Grid, also StackPanel and RelativePanel have Border attached properties. These attached properties are bonus for you to not add another 'redundant' control in your XAML tree to wrap your layout control in.
Why is the Border control NOT obsolete? Let's say you want a border around an image (which is inside any of the above mentioned layout controls together with other items, so you can't reuse the layout control's border). Now you have 2 options:
wrap the image in a Border control.
wrap the image in a Grid (or other layout control) and abuse the attached properties.
My wording should be clear which one is best: pick the Border control. A rule of thumb is: keep your visual tree as small as possible. Opt for the simplest control doing the task. Placing an image in a Grid just for having the border around it adds to much extra overhead in your visual tree.
I am creating a UWP app and I am using the VariableSizedWrapGrid control. I am binding the Width of the a ComboBox in the grid to it the ComboBox width resizes based on the entries in the list. ( I am using a simple property exposed through my view model.) When I had the items in a StackPanel with a Horizontal orientation it worked fine. See picture below
The challenge of course is that on a smaller screen I need the fields to wrap around. So I switched the StackPanel to a VariableSizedWrapGrid. However, when I do that, the Grid does not seem to be handling the resizing of the ComboBox correctly as I get what is shown below. (See the ComboBox is now cut off
Any suggestions on how to resolve this would be greatly appreciated.
You are using the wrong Panel for the job. The one you're looking for is a WrapPanel (which doesn't exist actually though), but there are some implementations available, eg.: http://codepaste.net/8gr5go
Is it possible to apply UI virtualization to ScrollViewer in WinRT. In my application I am creating a line chart with the help of Polyline(Polyline embedded inside a scrollviewver). But in the current case, If it come more than 500 points. It blocks the UI during the time of interacting with the Map. So what I am trying to achieve is to apply kind of UI virtualization to scroll view. If anyone had any idea to solve this please help me.
The way I would handle a Polyline is I would break its data into sections, perhaps screen-wide ones (assuming horizontal-only scrolling), put a Canvas inside of the ScrollViewer, make the size (Width) of the Canvas the total size of the chart and put a few (say 5) Polyline controls in it and then on the ViewChanged event update the Polyline controls' Canvas.Left and Points properties to correspond to the area around the current view port of the ScrollViewer. That should give you smooth scrolling. Just don't add/remove or update the controls on each ViewChanged and only update Canvas.Left and Points when you need to - that is when you don't have a Polyline ready to display next to the current view port.
I have a series of items in a GridView.
I want to animate the TranslateTransform of a GridViewItem so that it is outside the boundary of the GridView. When I do, it is clipped. Is this type of transform possible?
Sadly, I don't think so. I had to do something similar a while ago and it turns out that the template of a GriView (and ListView, ListBox, etc...) contains a ScrollViewer control. The thing about the ScrollViewer controls is that they MUST define a clipped viewport to give the user the impression of scrolling. In fact, if you were to decompile the ScrollViewer control, you can see that it hard codes the clipped bounds, so you cant even change the template or style.
Things may have changed since I looked into this, and my investigations where on WPF not XAML in Windows 8, but I dont think that it would have changed based on your description of the issue.
Here is a SO question in relation to this topic: WPF clipping even when no clipping is desired - how to turn it off?