I need to have two RadCharts inside a horizontal StackPanel and want both the charts to be of equal width. I don't want to give explicit length to the width of the charts. This can be easily achieved by using a Grid control but my scenario requires a StackPanel.
Often the documentation is not quickly comprehensible because it is either written in a confusing way or the needed information is hidden among a ton of other information that doesn't help in the particular case. And so, in my opinion, even if it is a "basic thing", it doesn't hurt to give a quick answer (or if one thinks it is too primitive, he/she should just post nothing at all).
<StackPanel Orientation="Horizontal" Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MySizeGroup" />
</Grid.ColumnDefinitions>
<Button Height="23" Content="Reset" Padding="5,1" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MySizeGroup" />
</Grid.ColumnDefinitions>
<Button Height="23" Content="Set" Padding="5,1" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MySizeGroup" />
</Grid.ColumnDefinitions>
<Button Height="23" Content="Import" Padding="5,1" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MySizeGroup" />
</Grid.ColumnDefinitions>
<Button Height="23" Content="Export" Padding="5,1" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MySizeGroup" />
</Grid.ColumnDefinitions>
<Button Height="23" Content="Create new" Padding="5,1" />
</Grid>
</StackPanel>
Hope this helps :)
Put them into individual Grids, use a column with a common SharedSizeGroup and set Grid.IsSharedSizeScope to true on the StackPanel.
Related
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Margin="30" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</StackPanel>
</StackPanel>
--Result image--
Im trying to make it so that the textbox will fill the rest of the space inside the current StackPanel.
however the "Stretch" propety doesn't seem to work - why is that?
Is there a different way do it or what am I doing wrong?
A StackPanel always tries to achieve the minimum possible height/width, depending on orientation; therefore, Stretch has no effect. You might want to use a DockPanel instead, which allows children to stretch:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="49*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1"
Margin="30"
VerticalAlignment="Center">
<DockPanel>
<TextBlock DockPanel.Dock="Left" Margin="0,0,5,0"
Text="Username:" />
<TextBox HorizontalAlignment="Stretch"/>
</DockPanel>
</StackPanel>
</Grid>
I have a user control which contains combobox only, it looks like this
<UserControl x:Class="LayoutProblem.ComboboxUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ComboBox Width="300" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</UserControl>
Then inside of another user control I add a label to it, so it looks like this
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="Short Label" HorizontalAlignment="Right" />
<layoutProblem:ComboboxUserControl Grid.Column="1" />
<Label Content="Extra long Label" HorizontalAlignment="Right" Grid.Row="1"/>
<layoutProblem:ComboboxUserControl Grid.Column="1" Grid.Row="1"/>
</Grid>
Then next user control looks like this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Right" Content="Some other label" />
<TextBox Grid.Column="1"
Width="50"
Height="30"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
Finally in MainWindow I put above together and it looks like this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<layoutProblem:InputUserControl/>
<layoutProblem:ComboboxWithLabel Grid.Row="1" Grid.ColumnSpan="2" DataContext="{Binding DataContext2}" />
</Grid>
So all of this puts the controls together, but I’m having trouble of how to change the layout. Because now the labels should be in column 1 and textbox and comboboxes should be put to column 2. Itoes not matter what I set to the column definitions to, Auto, * or nothing the columns don’t get the size I want. If I take the column definitions out it suddenly works, but I need them because there are other things which are going to be put in the second column.
I looked online but I haven’t found a way to do it.
Thank you for your help.
Solved using IsSharedSizeScope = True and SharedSizeGroup = "".
How do I make TextBlock to resize to accomodate only available space in StackPanel?
StackPanel limited to my Grid layout. I just illustrated issue but in my real project it's little more complex, so ideally solution should be simple :)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Grid.Row="1"
Orientation="Horizontal">
<Button Content="Test" />
<TextBlock Text="Test test" />
<Button Content="Test 2" />
<TextBlock Width="Auto">
Some text that I want to trim with ellipse
</TextBlock>
</StackPanel>
</Grid>
You would better make the StackPanel another Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Test" />
<TextBlock Grid.Column="1" Text="Test test" />
<Button Grid.Column="2" Content="Test 2" />
<TextBlock Grid.Column="3" Text="Some text that I want to trim with ellipse"/>
</Grid>
</Grid>
I changed your 'main' grid some because it looks odd having only one row and column (starting at index=0) and setting the StackPanel to Grid.Row="1" and Grid.Column="1"
Proper answer is to use DockPanel instead of StackPanel. Last item in DockPanel will be sized to fit remaining space which is exactly what I needed.
I have a problem regarding a parent grid with a control in it that overlaps a tabcontrol.
I need the child grid (in the tab control) to resize its columns according to the overlapping control.
Specifically, when the overlapping control is resized (due to resize of the window for example) the child grid inside the tabcontrol needs to resize its columns so that the child controls inside the tabcontrol grid isn't overlapped by the control that overlaps the tabcontrol.
I sincerely hope someone here knows a solution for this problem, I've been fighting with it for days :)
Thanks in advance!
Best regards,
Req
edit: In response to the comments below:
Absolutely - I figured I should have, but seeing that I was/am at work I didn't have the code handy. But I can write up a similar example of the XAML.
<Grid Name="parentGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TabControl Name="tabCtrl" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2">
<TabItem Name="tabItem1">
<Grid Name="tabCtrlGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" /> <!-- This is the column I want to resize according to the overlapping image control below -->
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button Name="someChildControl" Grid.Column="1" Grid.Row="0" />
</Grid>
</TabItem>
</TabControl>
<Image Name="overlappingImg" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2" /> <!-- whenever the screen/window is resized, the parentGrid resizes, and thus resizing this overlapping image. -->
</Grid>
What needs to happen is that column 0 in the tabCtrlGrid needs to resize its width to fit the width of the overlapping area of the image. That way someChildControl is never overlapped by the image, regardless of how it's resized.
Hopefully that makes it a little more clear :)
How does this look?
<Grid Name="parentGrid" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Aqua"/>
<TextBlock Text="Tab controller" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
<Rectangle Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Aqua"/>
<TextBlock Text="Up down nav" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Grid Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top" Width="130" Height="160" Fill="BlanchedAlmond"/>
<TextBlock Text="CoverArt" HorizontalAlignment="Left" VerticalAlignment="Top" Width="130" Height="160"/>
<Rectangle Grid.Column="1" Fill="LightGray" />
<TextBlock Text="Tab content" Grid.Column="1" />
</Grid>
</Grid>
Ok this is what I wish to do.
I have a resizeable window which has 3 controls in same row in flowing order: textBlock, textBox and button.
textBlock and button have dynamic texts. So theirs size depends upon text inside.
Now what I wish to do is that textBox in the middle is always filling up all empty space between textBlock and button.
How do I do that?
I tried with the following code but it doesn't work because of fixed width in 1. and 3. column.
<Grid Margin="0,0,5,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Text="Text1"/>
<TextBox Grid.Column="1"/>
<Button Grid.Column="2" Content="Button1" HorizontalAlignment="Center"/>
</Grid>
You can use Auto for the two outer column widths instead of specifying the width
<Grid Margin="0,0,5,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Text1" />
<TextBox Grid.Column="1"/>
<Button Grid.Column="2" Content="Button1" />
</Grid>
You probably don't need the HorizontalAlignment in the columns either