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>
Related
Here's my code (which isn't working btw):
<DockPanel MinWidth="776" Margin="13" LastChildFill="True" Height="522" VerticalAlignment="Top">
<Grid DockPanel.Dock="Top" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="*"/>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
...
</DockPanel>
When I vertically size the control everything just sticks to the top (which I want, except for the middle to stretch).
Thanks in advance!
If you can just stick to dock panels, you do something like the following:
<DockPanel LastChildFill="true">
<DockPanel DockPanel.Dock="Top" Height="70" />
<DockPanel DockPanel.Dock="Bottom" Height="150" />
<DockPanel DockPanel.Dock="Top"><!-- Expandable content here--></DockPanel>
</DockPanel>
You will have to remove some values from the dock panel LastChildFill="True", Height="522" VerticalAlignment="Top" are stopping the grid from sizing.
Try this:
<DockPanel MinWidth="776" >
<Grid DockPanel.Dock="Top" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="*"/>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="Blue" Grid.Row="0" />
<Rectangle Fill="Green" Grid.Row="1" />
<Rectangle Fill="Red" Grid.Row="2" />
</Grid>
</DockPanel>
I got the following xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="_sampleText"
Grid.Row="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Width="200"
Height="50"
FontSize="36"
Text="Hello world"
TextAlignment="Center"
Visibility="Collapsed" />
<Border Grid.Row="1"
Width="{Binding ActualWidth, ElementName=_sampleText}"
Height="{Binding ActualHeight, ElementName=_sampleText}">
<Border.Background>
<VisualBrush Stretch="None"
Visual="{Binding ElementName=_sampleText}" />
</Border.Background>
</Border>
</Grid>
I want my visual to be render even if the control he bind too is not visible. Is there a way of doing that?
You could also place the TextBlock in a Border and make that Hidden:
<Border Visibility="Hidden">
<TextBlock ... />
</Border>
No. If the Visibility=Collapsed then it won't take part in the measure/arrange layout pass and not be rendered (the Width and Height will be 0).
What effect are you trying to achieve? It looks like you want a preview pane? Reply in the comments and we can figure out the best approach.
Edit: There is a way to call the measure/update on a UIElement from code-behind however I think the best-approach for you would be use a BoolToVisibilityConverter.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox x:Name="OptionCheckBox" Grid.Row="0" />
<Border Grid.Row="1" Visibility="{Binding Path=IsChecked, ElementName=OptionCheckBox", Converter={StaticResouce BoolToVisibilityConverter}}">
<TextBlock Width="200" Height="50" FontSize="36" Text="Hello world" TextAlignment="Center"/>
</Border>
</Grid>
i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>
In Winforms, I use Fill and Dock to achieve this.
I have a "Page" where I would like to play a video file and also show the label at the bottom. I would like the page to be able to stretch and for the video to stretch and to have the label stay at the bottom of the page.
My attempts so far always results in the video covering the label when it is played. How can this be fixed?
(Other controls in the StackPanel have been omitted)
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.MediaElementExample" >
<DockPanel LastChildFill="True">
<MediaElement Source="media\numbers.wmv" Name="myMediaElement"
LoadedBehavior="Manual" UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded"
DockPanel.Dock="Top" Margin="50" />
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal"
Height="30" DockPanel.Dock="Bottom" Margin="50">
<TextBlock Margin="5" VerticalAlignment="Center">
Video Label
</TextBlock>
</StackPanel>
</DockPanel>
</Page>
Solution (with thanks to Daniel May):
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<MediaElement Source="media\numbers.wmv" Name="myMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" />
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Height="30" Grid.Row="1">
<Button Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</StackPanel>
</Grid>
You can achieve this using a Grid.
<Grid Height="300" Width="300">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<MediaElement Source="media\numbers.wmv"
Name="myMediaElement"
LoadedBehavior="Manual"
UnloadedBehavior="Stop"
MediaOpened="Element_MediaOpened"
MediaEnded="Element_MediaEnded" />
<TextBlock Margin="5"
Grid.Row="1"
VerticalAlignment="Center"
Text="Video Label" />
</Grid>
Using the Height attribute on the second RowDefinition, you force that row to size to it's contents. The preceding RowDefinition then fills the rest of the available space (in your case, your MediaElement).
First off I'm new to XAML so forgive me if I've done something stupid.
I have stripped down my page to the following example XAML (viewable in XamlPad):
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<!--<RowDefinition Height="Auto" />-->
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Row="0" Grid.RowSpan="4" Width="4" />
<Frame >
</Frame>
<GridSplitter Grid.Row="0" Height="4" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Grid Grid.Column="2" Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
</Page>
What I want to happen is for the Horizontal Grid Splitter to resize the top panel, moving the bottom Grid (which I want to keep at 25 height) and Scrollviewer controls down.
I've tried putting the Horizontal grid splitter into it's own Row and this moves the content down but it shrinks the content of the top grid which is not what I'm looking for.
Any suggestions as to waht I'm doing wrong? Is it something to do with the proportional height?
Firstly you have defined the splitter as if they apply to multiple rows and columns, but they actually have to have a row or column of their own and they apply to the adjacent rows/columns, so you were on the right track before.
The problem is the proportional (star) rows. For a splitter to work at least one of the adjacent rows/columns has to be fixed (pixel) sized or it does not adjust with the mouse but by some weird proportional movement instead.
I did not understand your "but it shrinks the content of the top grid which is not what I'm looking for" comment, so it might need some more explaining and I have made some guesses, but the XAML file shown below has the splitter behaving themselves:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="191.5" />
<ColumnDefinition Width="8.5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="194" />
<RowDefinition Height="0.148*"/>
<RowDefinition MaxHeight="25" Height="25" MinHeight="25" />
<RowDefinition Height="0.852*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="4" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Margin="0,0,-0.5,0" />
<sdk:GridSplitter Grid.Row="0" Grid.RowSpan="4" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0.5,0,-0.5,0" />
<Frame >
</Frame>
<sdk:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="3" />
<Grid Grid.Column="2" Grid.Row="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0.5,0,-1,0"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Column="2" Grid.Row="3" Margin="0.5,0,-1,0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
If I understand your problem correctly.
You should be able to take out the VerticalAlignment="Stretch" and HorizontalAlignment="Stretch" from your inner grid and get what you want.
The gridsplitter doesn't like other content in a different row (or col) that has both Allignments set to stretch.