Silverlight Border - Am I stupid? - silverlight

sorry, I did not find something useful when searching google. Very basic question, mainly "Am I stupid". I know StackPanel gives its child elements full space, but why does the "Auto" property relate to the PARENT element in case of a border. I mean perhaps I am doing something wrong, but this behaviour is definitly not what I intended:
Pic1 http://img6.imageshack.us/img6/171/20090805002723.jpg
Ok, after some thinking I found a way, which looks like this:
Seriously http://img18.imageshack.us/img18/3173/20090805003045.jpg
But really, this way? I mean a "minimal sized control" with a textbox (which width I want to define) and a border around it, and I need this kind of tree? If anyone has a better way, please tell me...
Chris
PS: And that while I am writing about the nice UI composition for Silverlight, and wanted to give a simple example.. I just say: Legendary!

Definitely not stupid. This can be very confusing. I find it helps when thinking about layout in WPF/Silverlight to think top down from the root of the control hierarchy instead of bottom up.
It becomes obvious when you think about the stack panel's job. It stacks up its child elements and sets their widths to its width. It is therefore overriding your border's width of Auto. The Canvas you later wrapped around it does not try to rearrange its children at all, and it does not override their widths, so while its width is the width of the stack panel, the Auto on your border is now working (sized to its content, the TextBox).
Clear as mud?
Here is an article with more detail:
http://msdn.microsoft.com/en-us/library/ms745058.aspx
And I highly recommend the WPF book by Chris Sells & Ian Griffiths to get up to speed on the intricacies of WPF/Silverlight layout.

Canvas sould be avoided unless it really makes sense for what you're trying to do. For example, Canvas normally makes sense for a game, or something where you want to drag elements around. Here it's just getting in your way.
Reasons not to use Canvas:
http://blogs.msdn.com/devdave/archive/2008/05/21/why-i-don-t-like-canvas.aspx

An easy way is to get rid of the Stackpanel and just use the VerticalAlignment and HorizontalAlignment to keep it at the top left. Then just set the Border Width and leave the Height alone.
<Grid x:Name="LayoutRoot">
<Border Width="150" BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBox Text="I'm Serious" Background="LightBlue" />
</Border>
</Grid>

Related

Trying to wrap and scale text in a textblock WPF

I'm trying to auto scale the font and wrap text in a TextBlock in WPF and I can't figure it out.
I've Googled it and looked at stackoverflow loads of times and the main suggestion is to place a TextBlock inside a ViewBox. I've tried that, and all it does is scale the whole text down to one line instead of wrapping it.
If I just use a TextBlock without a ViewBox it wraps, but doesn't scale to fit. It's driving me mad, as I am literally trying to move from WinForms to WPF to make better looking UIs.
I've tried StackPanel and DockPanel and they still don't have the desired effect.
All I want is a TextBlock to take a string of text of unknown size and display it scaled and wrapped. I don't understand why it's so difficult
It is helpful to include code of what you have tried.
When I do this:
<Grid>
<TextBox VerticalAlignment="Center" TextWrapping="Wrap" Width="100"/>
</Grid>
I get this:
Is that what you are looking for?
You could also check out the RichTextBox if you need more features.

Dynamic scrolling in a WPF application with ItemsControl object

In my xaml, I have some object made by me. I put them in row and, if the window is too little for all, I go in a new line.
The problem is when the window is so little that, also in a new line, the elements can't be all shown. The solution is simple: scroll bar!! But, if I set the Vertical/HorizontalScrollBarVisibility to auto, it doesn't go to a newline anymore.
This is my xaml:
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" >
<ItemsControl Name="ItemGroups" ItemsSource="{Binding NotifyItemUI}" />
</ScrollViewer>
and this is a screenshot what I need as my goal:
For example, if I resize my area vertically, and I have 3 rows of objects, in this way I can't see the third row if the window becames too little. In this case, I'd like to see a vertical scrollbar to scroll it.
Same thing horizontally: if I have too many elements for one single row, I have to scroll it horizontally.
What you describe looks like a WrapPanel, but the way you write about it suggests it is a custom control, so we cannot see what your ItemsControl is doing for layout.
However, ScrollViewer can have tricky interaction with a Panel. If the Panel measures to infinity, it will always consider itself big enough, and never tell the ScrollViewer it is out of room. The result is that the ScrollViewerdoes no know the scrollbar is needed. If this is your problem, then setting the Width and Height properties, or maxima as #Sheridan said, ought to fix it.

WPF: how to write text in a different direction?

I need to write text in the orientation specified for the image below. The fact is that I saw some examples around here by using a textblock and rotating the angle of the control using "RenderTransform", but this is not what I really need. I tried to do it using an image but it doesn't fit very well... so I really don't know how to solve it. If you look at the image beside you can see that the text is written from bottom to top and the line below the text is in the right of the screen.
This is the screen that I need to develop:
I tried by rotating the textblock, but the only way that it works for me was wrapping the text, but this is just the "closest" solution that I found. Also, as you can see, I need to set a border for the textblock.
Anyway, I hope you can help me because any example around fits with my problem.
In order to rotate your text at 90 degrees, I believe that you will need to use the LayoutTransform instead of the RenderTransform:
<TextBlock Text="FootRoller" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
The difference is when the transform will be applied. Using the LayoutTransform, the text will be rotated before the layout pass and this will be important in your case. I imagine that using the RenderTransform will rotate your TextBlock, but as it does that after the layout pass, it would not show it all... this is because it was measured for size before it was rotated.
You can find out full details from the Transforms Overview page on MSDN. From the linked page:
LayoutTransform – A transform that is applied before the layout pass. After the transform is applied, the layout system processes the transformed size and position of the element.
RenderTransform – A transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits.
They're all right. RenderTransform should be all you need. Like;
<TextBlock Text="FootRoller" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<CompositeTransform Rotation="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
P.S. - You can literally just change RenderTransform to LayoutTransform which Sheridan has provided an explanation for in his answer.
If RenderTransform didn't work, take a look at LayoutTransform. You didn't tell us why RenderTransform didn't work but it's usually a safe bet that LayoutTransform will solve whatever problem it gave you.

Any hints for dealing with snap to device pixels in WPF

Many controls in WPF has this snap to device pixels (as explained on MSDN). I just often find myself forgetting to set it and then later discover that something sometimes looks odd because of this.
What do people use to deal with this issue?
SnapsToDevicePixels property is inherited through the element tree.
I always set SnapsToDevicePixels="True" on each Window, and all the children inherit the value.
(But I don't have any suggestion for how to remember to set it on each Window.)
SnapsToDevicePixels="True" does not trickle down into an OxyPlot grid, however...
Some of the grid lines show up double.
and OxyPlot PlotView's SnapToDevicePixels does not help either.

Get Width Available for Children in a Scrollviewer

How do I get the width available for the children of a scroll viewer in XAML? Thanks.
There's no direct way of doing this that I know of, since WPF automatically passes the available space in to the child controls' Measure() function so that they size to fit the available space.
Note that, by default, it passes in infinity for the vertical direction, since content can scroll forever vertically. You can change the visibility of the scroll bars in both the vertical and horizontal direction to affect whether infinity is passed vertically, horizontally, or both.
The best way of figuring out how wide the child controls actually have to layout in pure XAML would be to create an empty control - for instance, an empty grid - and then bind to its ActualWidth property:
<ScrollViewer>
<StackPanel>
<Grid x:Name="MeasureGrid"/>
<TextBox Text="{Binding ElementName=MeasureGrid, Path=ActualWidth}"/>
</StackPanel>
</ScrollViewer>
Aside from displaying the width that is actually available to controls, I don't see any other use for this information in XAML, though - all of the other scenarios I can think of can use this information implicitly. Can you give us more information on what you are trying to accomplish?

Resources