I have a ComboBox in a Grid along with several text boxes.
The Grid is defined like this:
<Grid Grid.Row="1" Grid.Column="1" Margin="0,10,0,0" ColumnSpacing="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- All of the text boxes -->
<TextBlock Grid.Column="8" Text="Combo" VerticalAlignment="Center" />
<ComboBox Grid.Column="9" Text="{x:Bind ViewModel.ComboText}" ItemsSource="{x:Bind ViewModel.ComboItems}" HorizontalContentAlignment="Stretch" />
</Grid>
Note that I have added in HorizontalContentAlignment. This has no effect in making the combo fill the Grid, and it still looks like this:
How can I make the ComboBox fill the width of the Cell, equally with the other TextBoxes?
ComboBox in a Grid does not fill a grid's cell width
HorizontalContentAlignment is used to make horizontal alignment of the control's content. If you want to make ComboBox fill a gird cell please set HorizontalAlignment as Stretch.
<ComboBox Grid.Column="9"
Text="{x:Bind ViewModel.ComboText}"
ItemsSource="{x:Bind ViewModel.ComboItems}"
HorizontalAlignment="Stretch" />
Related
I have a Forms application, and have ContentPage XAML form.
I try to add an image to this Grid but
this code gives me the error Type image not found.
Note : I had been added this image under Recources and tried also on the root folder.
How can I fix this?
Note2: I had been by right clicked the project and had added image to project.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="1" Grid.Row="0" Grid.Column="0" />
<image Grid.Row="0" Grid.Column="1" source="image2.png"></image>
<Button Text="3" Grid.Row="0" Grid.Column="2" />
</Grid>
XML (and thus XAML) is case-sensitive, so make it <Image> and </Image>.
Like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="1" Grid.Row="0" Grid.Column="0" />
<Image Grid.Row="0" Grid.Column="1" Source="image2.png"></Image>
<Button Text="3" Grid.Row="0" Grid.Column="2" />
</Grid>
I'm using TextLineBounds in Windows 8.1 to align text of different font sizes on the baseline, such as
With the XAML looking like:
<Grid x:Name="PageHeader">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="50"
Text="OOO Big Font" />
<TextBlock Grid.Column="3"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="26"
Text="OOO SmallerFont" />
<TextBlock Grid.Column="5"
VerticalAlignment="Bottom"
TextLineBounds="TrimToBaseline"
FontSize="20"
Text="OOO Even Smaller Font" />
</Grid>
</Grid>
When I resize the window, at some point (before the minimum size of 500) the descenders are clipped (and I've also seen the bottom pixel or two across entire line get clipped even when there are no descenders - resulting in artifacts like a flattened O).
The display elements do not change on the resize, there's no modification due to visual state, etc.
It seems like a bug, but not sure if there's a workaround (other than to abandon use of TextLineBounds).
I want to create a grid into a grid. I tried the following piece of code, but this doesn't work, does anyone know why? And Do you have a solution?
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ShowGridLines="true">
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#EEE8AA" />
<GradientStop Color="#2F4F4F" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
</Grid>
</Grid>
The code is correct. You wont see anything because the second grid just fills a specific grid cell in the parent grid and has no content. Try adding some text boxes or colours and you will see that it works fine.
See the sample below. You will have 3 text boxes displayed in your second grid correctly.
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ShowGridLines="true">
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#EEE8AA" />
<GradientStop Color="#2F4F4F" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="90*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">TextBox1</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0">TextBox2</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0">TextBox3</TextBlock>
</Grid>
</Grid>
If you want to see the Grid visually without adding content to it, at least try to set it's Height/Width to a fix value. I copy-pasted your code inside StackPanel set the outer Grid's Height to 100 :
<StackPanel Background="Gray">
<Grid ShowGridLines="true" Height="100" >
.......
</Grid>
</StackPanel>
Result :
I have the following markup:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="Col1" Text="Text1" Grid.Column="0" />
<TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" />
</Grid>
If I put a lot of text in Col1 it exceeds the screen and Col2 could not be seen at all. I would like to change that behavior such that if there's too much text in Col1 then it's width gets reduced so that Col2 could be fully seen.
On the other hand if I change markup to this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="Col1" Text="Text1" Grid.Column="0" />
<TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" />
</Grid>
Here are images the illustrate how I want TextBlocks to behave:
Combined width of two TextBlocks is smaller than screen so they go one after another.
First Text block is very long so it is cropped in order to contain second TextBlock within screen.
Then everything is OK when Col1 has a lot of text but when the amount of text is small there is a gap between Col1 and Col2. What should I do to get desired behavior in both situations?
Revised;
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Col1" Text="Text1" />
<TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" TextWrapping="Wrap" />
</Grid>
Then Keep in mind to limit their overall size this would be placed in a parent panel container like another Grid
Given the following XAML my goal is to keep the columns AAA, BBB, CCC always visible. The columns with the listboxes can resize all the way to zero though.
If I remove the ListBoxes then the application works exactly the way I want it to. That is, it doesn't have the weird behavior where the min widths are not respected.
With the listboxes (or DataGrids) the following XAML has this behavior:
After starting the application, if I drag the splitterA all the way close to BBB (BBB will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will have the desired width of 25.
On the other hand, after starting the application, if I drag splitterA all the way to the right (AAA will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will go off the screen. Surprisingly if I then drag the splitterA just a pixel to the left then both columns will "snap" into the correct place.
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Why does it work when I remove the listboxes?
Note: I modified the question and XAML code slightly to clarify things and also to show what I just found about the listboxes.
I've been playing around with the code for a little bit and it looks like your main problem lies in the fact that your GridSplitters don't have their own columns.
The way GridSplitter works is it adjusts the column immediately to the left and immediately to the right of it. So simply adding an additional column for a GridSplitter won't quite cut it, since you will then have 4 columns in your Grid, and you need both columns to the left of the splitter to be affected. So I would recommend putting those in an additional Grid.
The other problem is the MinWidth of 50 you have on the outer grid does not account for the width of the GridSplitter, so it should be 55.
It seems like this whole thing could be done more cleanly, but since I'm not sure exactly what you're trying to accomplish, I kept the "spirit" of your code intact and updated some things:
<Grid Background="CadetBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="Auto"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="55" Width="5*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" />
<ListBox Grid.Column="0"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="Aqua" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="25" Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Text="BBB"/>
<ListBox Margin="0,20,10,20"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="BurlyWood" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Margin="0,20,10,20" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Hope this helps!
It's a WPF bug:
https://connect.microsoft.com/VisualStudio/feedback/details/636072/msdn-forum-grid-layout-issue-with-minwidth-starsizing
http://social.msdn.microsoft.com/Forums/en/wpf/thread/24460784-7d09-4627-89fe-975e0ca7b303
I got around it with a hack. If anyone has a better solution I'd love to hear it...
XAML:
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" DragDelta="splitterB_DragDelta" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Name="bbbColumn"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" Name="bbbListBox" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" DragDelta="splitterA_DragDelta" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Code:
private void ToggleWidths()
{
if (bbbColumn.ActualWidth < 10
&& bbbListBox.Visibility != System.Windows.Visibility.Collapsed)
bbbListBox.Visibility = System.Windows.Visibility.Collapsed;
else if (bbbColumn.ActualWidth >= 10
&& bbbListBox.Visibility != System.Windows.Visibility.Visible)
bbbListBox.Visibility = System.Windows.Visibility.Visible;
}
private void splitterA_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}
private void splitterB_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}