Please check the code below. I am working with Silverlight.
<Canvas x:Name="LayoutRoot" Background="blue" Width="100" FlowDirection="RightToLeft">
<TextBlock x:Name="tb2" Text="abcd" Canvas.Top="100" Canvas.Left="20" Foreground="White"/>
</Canvas>
FlowDirection set to RightToLeft in canvas or TextBlock makes the text to disappear..Any idea what is causing this problem. and how to make it work?
From my short tests it seems FlowDirection is available on Canvas only because it's part of UIElement. But using it on a Canvas doesn't really make much sense. A canvas is just that - a canvas on which you can place objects in exact places.
FlowDirection works quite well when using inside a Grid. I don't know what you're trying to achieve, but I'd start with rewriting your control to use Grid rather than Canvas.
Related
I have a StackPanel that needs to contain drawn background. Specifically, my StackPanel needs to have the ability to grow and the rectangle must grow with the StackPanel, but must remain pseudo-anchored to each side at a fixed position.
I've attempted to use the Canvas.Left, Canvas.Right, Canvas.Top and Canvas.Bottom attached properties, but so far they've not worked. Furthermore, this does seem to work when drawing within Canvas objects, just not when they are embedded within a VisualBrush set as a background. How can I accomplish drawing this resizable, rectangular background within my StackPanel?
Below is the state of my current code. I've tried various approaches but none seem to work.
My Code:
<StackPanel DockPanel.Dock="Right" Orientation="Vertical" VerticalAlignment="Center">
<StackPanel.Background>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Canvas Background="Magenta" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
Rectangle Fill="#FFDDECF7" Canvas.Left="20" Canvas.Top="20" Canvas.Bottom="20" Canvas.Right="0"/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</StackPanel.Background>
...
</StackPanel>
This currently doesn't render anything. I set the canvas background to magenta just so I could see if it were drawing, and I'm not even seeing that. Other attempts have drawn the canvase, however, the blue rectangle is always stretched to fill the window, regardless of attached canvas property settings.
Sample:
The image below is a sample of what I want. Again, I'm using an ugly Magenta color to show the offset of the internal, blue rectangle. As the StackPanel grows or shrinks, the rectangle needs to be affixed to the top, left, right and bottom.
My suggestion is to place the stackpanel inside a grid:
<Grid DockPanel.Dock="Right" VerticalAlignment="Center" Background="Magenta">
<Rectangle Margin="20" Fill="#FFDDECF7"/>
<StackPanel Orientation="Vertical">
no background...
</StackPanel>
</Grid>
Wrap Canvas into a ViewBox, then work on a ViewBox. As far as I know Canvas doesn't support scalling too well.
This should be easy but I'm blanking out here.
I have a TextBlock inside of a Border control. The Width of the Border changes based on the length of the text in the TextBlock (updated in ViewModel). I would like this change in Width to be animated so that the width grows slowly (instead of jerky).
My Xaml:
<Border x:Name="myBorder" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock x:Name="myTextBlock" HorizontalAlignment="Left" Text="Some Text"/>
</Border>
This is a perfect job for Expression Blend. You will need to create a Storyboard animation. Then once its created go into the code behind in visual studios and play it. You can tell it to play to a certain point based on how much text you have in your text block.
Here is a basic tutorial
http://www.silverlightbuzz.com/2009/10/12/animating-with-storyboards-in-blend/
This example has back end code also
http://dotnet.dzone.com/articles/wpf-storyboard-%E2%80%93-what-it-and
I'm trying to vertically center the content of a TextBox with the VerticalContentAlignment property but it seems to have no effect at all. The text stays at the top. Can anyone tell me how to do this?
Here's my code:
<TextBox Grid.Column="1"
Grid.Row="0"
Width="200"
Height="28"
VerticalAlignment="Center"
VerticalContentAlignment="Center" />
It is possible to make the TextBox center its text vertically. However, that does require you to reapply its ControlTemplate.
To do this:
Copy the Style and the ControlTemplate from the TextBox Styles and Templates page on MSDN to a suitable <UserControl.Resources> element. (This ControlTemplate is actually for a validation tooltip; the ControlTemplate we'll change is within the Style.)
Find the ScrollViewer element within the Style for the TextBox, and add a VerticalAlignment="Center" property to it.
Alternatively, you could add the property
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
to the ScrollViewer. This should allow you to set the vertical alignment of the contents of your TextBoxes using the VerticalContentAlignment property.
You can follow much the same approach if you wish to change the horizontal alignment of a TextBox's content as well.
The XAML code is correct, the following should be sufficient:
<TextBlock Text="Centered Text" VerticalAlignment="Center" />
Can you try that code outside your grid?
Check the attributes you defined on your Grid, this will probably cause the behaviour you have. Can you post the complete XAML code?
I'm presenting text in a wpf TextBlock control (.Net 3.5). The content of the textblock varies depending on what the user selects in a list box. The text wraps, so I don't need an horizontal scroll bar. However, there is often more text than the amount the window can display, so I need a vertical scroll bar.
As I started searching I quickly found that the answer is to wrap the TextBlock in a ScrollViewer. However, It Does Not Work (TM) and I'm hoping someone can help me work out why.
This is the structure of the UI code:
<Window x:Class=..>
<StackPanel>
<ListBox HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</StackPanel>
</Window>
When the user selects an item in the list box, some text associated with this item is presented in the TextBlock. I would have thought that the code as it stands should have been all that's required, but it never provides me with a scroll bar.
Searching and experimenting have given me two clues: the root of the problem might be related to me updating the content of the TextBlock dynamically, and that the TextBlock does not resize itself based on the new content. I found a posting that seemed relevant that said that by setting the Height of the TextBlock to its ActualHeight (after having changed its content), it would work. But it didn't (I can see no effect of this).
Second, if I set the height (during design time) of the ScrollViewer, then I do get a vertical scroll bar. For instance, if I set it to 300 in the xaml above, the result is almost good in that the window as first opened contains a TextBlock with a vertical scroll bar when (and only when) I need it. But if I make the window larger (resizing it with the mouse during runtime), the ScrollViewer does not exploit the new window size and instead keeps its height as per the xaml which of course won't do.
Hopefully, I've just overlooked something obvious..
Thanks!
Because your ScrollViewer is in a StackPanel it will be given as much vertical space as it needs to display it's content.
You would need to use a parent panel that restricts the vertical space, like DockPanel or Grid.
<DockPanel>
<ListBox DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button DockPanel.Dock="Top" Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</DockPanel>
I'm trying to style a TabItem Header, using a path to define the shape of the header.
I'm stuck in a problem that I can't seem to resolve :
If I set the path Stretch property to "None", it won't scale if the text in my TabItem Header is long.
If I set the path Stretch property to "Fill", it will stretch so much that each TabItem Header will be the same width as the TabControl - which mean only one very wide TabItem Header per line...
Do you know a way to stretch the path to the layout (depending on the TabItemHeader Content), but not more?
I would be very pleased if somebody can help me on this... it's been an annoying while I'm looking for a solution.
Thank you :-)
It's hard when you don't add any sample code but say that your HeaderTemplate looks like below then you can bind the Width of the Path to the ActualWidth of the TextBlock.
<TabItem.HeaderTemplate>
<DataTemplate>
<Border x:Name="grid">
<Grid>
<Path Data="..."
Stretch="Fill"
Width="{Binding ElementName=grid, Path=ActualWidth}" />
<TextBlock Name="textBlock"
Margin="4"
FontSize="15"
Text="{Binding}"/>
</Grid>
</Border>
</DataTemplate>
</TabItem.HeaderTemplate>
But be aware of rendering performance! Binding to ActualWidth and ActualHeight will result in binding errors as long as the UI hasn't been rendered enterly. And binding errors are expensive...The best way to avoid this, is to set up the binding in code when SizeChanged is called. That's the first moment after measuring and sizing has been finished.