I'm working on a dataform in Silverlight 4 and would like to group elements by section, with a title for each. The title consists of a TextBlock followed by a horizontal line. The line runs until the edge of the form.
I've tried the following (from this thread: http://forums.silverlight.net/forums/p/77813/183885.aspx), without success:
<StackPanel Orientation="Horizontal"/>
<TextBlock Text="Section title" />
<Line X1="0" Y1="0" X2="1" Y2="0" Stretch="Fill" Stroke="Black" />
</StackPanel>
Any idea why this isn't working?
Thanks!
How about using Border instead with a height of 1
I was curious about your post, so I tried it for myself. I was unable to get the line to stretch also when using a StackPanel. Although, I was able to get it to work with a Grid:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Section title" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Line Grid.Row="0" Grid.Column="1" X1="0" Y1="0" X2="1" Y2="0" Stretch="Fill" Stroke="Black" StrokeThickness="1" />
</Grid>
Related
I have the next layout
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Fill="White" Stroke="White" Width="7" Height="7" />
</StackPanel>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Message" />
<TextBlock Grid.Row="1" Grid.Column="2" Text="Info" />
</Grid>
I have an issue in the StackPanel which hosts a Title and Ellipse, the goal is the Online marker by the ellipse whitch should be placed at the end off the title. But it shouldn't out of a view part.
I have tried to put TextBox and Ellipse into cells of the Grid unfortunatly it doesn't help.
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnsDefinitions>
<TextBlock Grid.Column="0" Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7" />
</Grid>
In my mind it should render correct, but the ellipse is out of view port again.
This is a Expression Blend layout scrinshots, the same layout is rendering in runtime.
The Grid bounds:
The TextBox bounds:
The Ellipse bounds:
So the TextBox and Ellipse is out of the grid :(
Update: I need the next behaviour of layout
1) Short title, the ellipse attached to the title end
2) Long title, the ellipse attached to the right side of container
I tried your code and it renders fine (in other terms it renders in the viewport. See red arrow). Please find attached a screenshot of the results. (I added the showgridlines just to illustrates the rows and cols)
//--- Changed testing and fixed code for intended effect ---//
Code changes in XAML: Swapped the width values for the columndefinitions. Added Textwrapping to textblock in order to see entire text. (You could opt for texttrimming instead depending on your aesthetics.)
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title should be really really really really really long" HorizontalAlignment="Left" TextWrapping="Wrap" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7"/>
</Grid>
Outcome:
How I can draw a circle in WPF (without code-behind) using min(width, height)/2 as radius?
you can do it in pure XAML you just need to use Binding for the values. You also have to make sure that everything is named
<Grid Name="grdMain">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" Name="Col1" />
<ColumnDefinition Width="100" Name="Col2" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="75" Name="Row1" />
<RowDefinition Height="100" Name="Row2" />
</Grid.RowDefinitions>
<Ellipse Grid.Column="1" Grid.Row="1"
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="{Binding RowDefinitions/ActualHeight, ElementName=Row1, Mode=OneWay}"
Width="{Binding ColumnDefinitions/ActualWidth, ElementName=Col1, Mode=OneWay}"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Grid>
Where does width and height come from? Example XAML for a circle is:
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
A circle is just an Ellipse where Height = Width.
I am wondering If I can use stack panel to get the following layout
one will not be enough, but you can certainly do with two:
<StackPanel Orientation="Vertical">
<BigBoxOnTop />
<StackPanel Orientation="Horizontal">
<SmallBox_1 />
<SmallBox_2 />
<SmallBox_3 />
....
</StackPanel>
</StackPanel>
use margin and padding to place your boxes inside the panels
Yes. The outer one looks like a vertical stackpanel. The smaller boxes (controls or panels) can be placed with explicit margins to lay them out as shown above.
Looks to me like you need to nest a gridpanel inside each of the vertical stack panel's top and bottom halves... but I'm just a beginner at WPF.
try something like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="White" Stroke="Black" Margin="5" StrokeThickness="2"/>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" StrokeThickness="5" Margin="25,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" StrokeThickness="5" Width="100" Height="35" Margin="20,0,0,0"/>
<Rectangle Fill="White" Stroke="Black" Width="100" Height="35" Margin="25,0,0,0" StrokeThickness="5"/>
</StackPanel>
</Grid>
I was wondering if it was possible to do either in WPF:
I guess the main problem here that I can't embed a textblock in a line in XAML, which is something I'm use to doing. Does anyone have any idea of how I can tackle this problem?
EDIT: It would also have to handle diagonal text.
You can do this, this is actually pretty easy. You have to keep in mind that you can nest content inside a <TextBlock> tag....
<TextBlock>
<Line X1="0" Y1="0" X2="100" Y2="0" Stroke="Black" StrokeThickness="4"/>
<TextBlock Text="Hello there!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Line X1="0" Y1="0" X2="100" Y2="0" Stroke="Black" StrokeThickness="4"/>
</TextBlock>
Could you have a three-column grid, with a line in the first and third column and the text in the second? Of course you’d have to set the left and right line’s properties so that they stretch across the entire width.
I am adding this answer because I found the accepted answer and other answers did not address the first example, with variable length horizontal lines on both sides of Hello. Here is how to do that...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Separator Grid.Column="0" Margin="5"/>
<TextBlock Text="Hello" Grid.Column="1"/>
<Separator Grid.Column="2" Margin="5"/>
</Grid>
I want to fill a panel with rectangles, and when the panel is resized, the rectangles should resize as well.
Why doesn't the following work?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Rectangle Fill="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Page>
I would prefer not to use a Grid because of the pain of adding/removing columns and rearranging the children. (I was looking forward to StackPanel because if I wanted to add a yellow Rectangle at the beginning, I just declare it. I don't have to re-order the others by hand.)
Or a UniformGrid:
<UniformGrid Columns="1">
<Rectangle Fill="Red"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Blue"/>
</UniformGrid>
You're using a StackPanel whose behavior is to take the size of its children. Use a Grid which takes the whole available size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="Red" Grid.Row="0" />
<Rectangle Fill="Green" Grid.Row="1" />
<Rectangle Fill="Blue" Grid.Row="2" />
</Grid>