Apologies if I'm going mad, but as shown in the following image, each RowDefinition inside my grid appears to be adding '0.5'px vertical margin to itself.
It's a completely blank project, created from scratch.
Have I remembered this incorrectly or is something up?
<Grid UseLayoutRounding="True" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Width="40" Height="10" Background="Aqua" Margin="1"/>
<Border Grid.Row="1" Width="40" Height="10" Background="Red" Margin="1"/>
</Grid>
Note, it's not just Visual Studio's Designer window that's showing this, binaries are exhibiting the same.
So if you remove both of the properties as mentioned in the comments that are giving permission to adjust based on the measure/arrange pass in this scenario you should be back down to your desired margin.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Width="40" Height="10" Background="Aqua" Margin="1"/>
<Border Grid.Row="1" Width="40" Height="10" Background="Red" Margin="1"/>
</Grid>
Hope this helps.
Related
I am new to C# and WPF development, and I am working on a program that encodes and decodes bitmaps. I have the following XAML code and its expected output:
<Page x:Class="Thompson_EncodeDecode.BeforeDecoding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Thompson_EncodeDecode"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="BeforeDecoding">
<Grid Margin="10,0,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Height="35" Padding="5" Background="White">
<Label VerticalAlignment="Center" Foreground="Black">Before Encoding</Label>
</Border>
<Border Grid.Column="1" Height="35" Padding="5" Background="White">
<Label VerticalAlignment="Center" Foreground="Black"> After Encoding</Label>
</Border>
</Grid>
What I am trying to do is add an image onto both columns of the grid so that I can show that the images are the same, but also below that show what the encoded and decoded message within the bitmap is to show that the encoding is actually working. I am unsure how to add an image to the column without either making the image the background for the grid, and also maintaining the Grid integrity.
Also some extra pointers on how to have the input data shown on the bottom right of the grid column would be helpful too. Most of the Googling I have been doing regarding this particular program has confused me, and I am wondering if there is a standard way of approaching it.
You can achieve this in many ways, one of the way is as follows
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- U can move this duplicate code into an usercontrol to reuse-->
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<!--Header-->
<RowDefinition Height="1*"/>
<!--Body-->
<RowDefinition Height="8*"/>
<!--Footer-->
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0"/>
<Image Grid.Row="1"/>
<Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<!--Header-->
<RowDefinition Height="1*"/>
<!--Body-->
<RowDefinition Height="8*"/>
<!--Footer-->
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0"/>
<Image Grid.Row="1"/>
<Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>
</Grid>
</Grid>
I'm unable to get the Gridsplitter to function with the following example code. The grid splitter does not move or resize the surrounding "Top" and "Buttom" grid rows which are set to fill available space:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
Edit: As Clemens says, your GridSplitter has to be a direct child of the grid that you want to split. You are putting a new Grid into row 1 of the parent grid when you do:
<Grid Grid.Row="1">
<GridSplitter Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
</Grid>
You need to put the splitter directly into the parent grid that you want to split and declare the row in the element tag:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<TextBlock Grid.Row="0" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
Just remove the Grids that are useless:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<TextBlock FontSize="55" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
EDIT :
For clarity: the GridSplitter control resizes just elements at its same level in Grid children hierarchy. You can put whatever you want inside the grid, but you have to put the GridSplitter to the same level of the control you want to resize.
You can still do this:
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
</Grid>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ResizeDirection="Rows"/>
<Grid Grid.Row="2">
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
</Grid>
</Grid>
But the GridSplitter has to be at the same level of the control you want to resize.
My WPF application has a window that contains a ListBox. For some reason that I don't understand, it started growing on screen today after items are inserted into it. I want its height to stay fixed and I don't want it to grow every time an item is inserted.
Here's the XAML for the window:
<Viewbox Stretch="Uniform">
<Grid Background="{DynamicResource WindowBackground}"
Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="{DynamicResource AlarmTitleBackground}"
Grid.Row="0"
MouseLeftButtonDown="LeftMouseButtonDown">
. . .
</Grid>
<Rectangle Fill="{DynamicResource AlarmTitleBackground}"
Grid.Row="1"
Height="4" />
<Grid Background="{DynamicResource ControlBackground}"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid FocusManager.IsFocusScope="True"
Grid.Column="0"
Grid.Row="0"
Name="PendingAlarmScope">
<ListBox Background="{DynamicResource TextBackground}"
HorizontalContentAlignment="Center"
IsSynchronizedWithCurrentItem="True"
Margin="5"
MinWidth="185"
VerticalAlignment="Stretch"
Name="AlarmsList"
SelectionChanged="AlarmsList_SelectionChanged" />
</Grid>
. . .
</Grid>
</Grid>
</Viewbox>
I found a post in a blog about a TextBox that kept growing as characters were typed. The author indicated that the TextBox was in a ScrollViewer with the HorizontalScrollBarVisibility property set to "Auto". They changed it to "Disabled" and this fixed it for them. I tried adding ScrollViewer.VerticalScrollBarVisiblility="Disabled" to the xaml but this didn't work. I also tried binding theListBox's MaxHeight property to theActualHeight` of another control that's the same exact height as I want & that didn't work, either.
How do I fix the Height of the ListBox without setting it? I want the ListBox to always fill the Grid cell it's in, and the window to grow and rescale itself for different screen resolutions.
<Grid Background="{DynamicResource ControlBackground}"
Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
for grins would you try dropping the view box and some other stuff
<Grid Background="{DynamicResource WindowBackground}"
Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Fill="{DynamicResource AlarmTitleBackground}"
Grid.Row="1"
Height="4" />
<ListBox Grid.Row="2" Background="{DynamicResource TextBackground}"
HorizontalContentAlignment="Center"
IsSynchronizedWithCurrentItem="True"
Margin="5"
MinWidth="185"
VerticalAlignment="Stretch"
Name="AlarmsList"
SelectionChanged="AlarmsList_SelectionChanged" />
</Grid>
After many hours of trying numerous things, I finally bit the bullet & set the Height of the ListBox to a value that I found using Snoop before it started growing. This stopped it from growing every time a new item was inserted. It was the only thing I could find to do that worked. A very frustrating day.
I have a Silverlight application and I try to display a generated text into a Cell of my grid. Unfortunately the TextBox does not seem to be able to have a stretching height and stretching width to his parent size. For the moment, I have simply use a ScrollViewer and Set the content but I can't select the text so I still have a problem.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*" />
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Button Content="Generate" Grid.Row="1" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Height="50" Click="GenerateSerialization" />
<ScrollViewer Name="scrollText" Grid.Column="2"></ScrollViewer>
<sdk:GridSplitter Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Name="gridSplitter1" VerticalAlignment="Stretch" />
</Grid>
Sorry... when I think I understand English I see have a lot of road to travel :o)
Check this:
<ScrollViewer Name="scrollText"
HorizontalScrollBarVisibility="Disabled"
Grid.Column="2">
<TextBox TextWrapping="Wrap"
Text="Bla, bla, bla..." />
</ScrollViewer>
I'd like to create a custom WPF accordion-like control without using WPF toolkit... After some searching it seems like the best approach would be to use an Expander... so I wanted to just see if I could get some sort of basic functionality like getting a row to expand upward to show some content when it is expanded and then to have it collapse and hide that content. It seems like it should be pretty straight-forward but my expander never expands. Here's my basic example:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="24"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="215"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Expander Grid.Row="3" Grid.ColumnSpan="2" Header="More Options" ExpandDirection="Down" Background="Red" IsExpanded="False">
<StackPanel Height="300">
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
</Expander>
</Grid>
Update your RowDefinitions. Currently, the Row that the Expander is in is hard-coded to have a Height of 24. Make it Auto.
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>