In my WPF application, a database is filled with personal data.
Among them is if a person is alive, and if not, date and place of their death can be given. Where you can feed the data, I have a grid with two columns, in the left one is "place of death" text block, in the right is a TextBox. Same for date of death.
If you select the "Alive" check box, I tried hiding both TextBlocks and TextBoxes with a style trigger and Visibility.Collapsed setter inside them, which seems really inconvenient.
Is there any other approach to do this?
If you are using MVVM , you can bind the Visibility to a boolean and use a value converter to change it to collapsed.
Look for BooleanToVisibilityConverter.
You can play with the Height of Row to achieve your goal.
XAML
<Grid Grid.Column="2" Grid.Row="1" x:Name="MyGrid">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
</Grid>
Code Behind: C#
MyGrid.RowDefinitions(2).Height = new GridLength(0);
Code Behind: VB.NET
MyGrid.RowDefinitions(2).Height = New GridLength(0)
Related
I have an Expander control, and the grid inside will have a ListBox with a Label on top of it saying 'Video Sources'. I am attempting to use Grid Row Definitions to achieve this. My issue however is that the grid rows separate everything evenly. I want the label to be directly on top of the ListBox. Removing the definitons causes the ListBox to fill up the entire grid including covering up the Label (which makes no sense to me as the label is on top).
My current code is below:
<Expander HorizontalAlignment="Left" Height="434" Header="Expander" ExpandDirection="Left" Margin="651,8,0,8">
<Grid Background="#FF252525" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Content="Video Sources" Grid.Row="0"/>
<ListBox Grid.Row="1" d:ItemsSource="{d:SampleData}">
</ListBox>
</Grid>
</Expander>
The code produces this result. You can see there are even gaps between each control. I want the video sources label right above the listbox:
It would be nice if you could set the column name like in a ListView, however as far as I am aware that is not possible. I don't think it's worth using a ListView for something that will only have a single column, either
You have to set the rows height ; to auto (ie: minimal value) and * (ie: remaining space).
Also only two rows definition are needed.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Content="Video Sources" />
<ListBox Grid.Row="1"
ItemsSource="{d:SampleData}"
VerticalAlignement="Top" />
</Grid>
I'm creating small browser as user control. I want to colour only one row because i'm moving address bar to bottom of grid. I tried to change Background in RowDefinitions but there isn't such property in XAML.
So how to do that?
That is correct, you are not supposed to set a background in RowDefinitions.
You could for example use a Grid to do that.
Here is a small example:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Background="AliceBlue" />
</Grid>
I have a stackpanel that contains an expander control and below that 3 rows of buttons. Depending on logic the buttons may be collapsed. If enough buttons are collapsed to eliminate a row of them, I would like the expander to open up revealing more of it contents. I need it to open up depending on how much room is available below it.
Is there anyway to partially open up an expander to make use of additional space if it becomes available?
Thanks
Harold
I think what you are trying to do is simpler than you make it sound,
You need the right container/ panel to achieve what you are asking.
An example is like below
:-
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Expander Grid.Row="0"/>
<Button Grid.Row="1"/>
<Button Grid.Row="2"/>
<Button Grid.Row="3"/>
<Grid>
With the Grid Panel if you use auto when the control within gets collapsed so does the space and because the first Expander's Grid row is * it will adjust to fill and free space.
t may be a basic question. But I can't figure it out after several hours research.
I have an item detail page. I want to add another grid in it whenever the scrollview reaches the right bottom. Right now I partially achieved this goal by adding a column in the xaml and toggle its visibility property.
<Grid x:Name="body" Style="{StaticResource LayoutRootStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="dynamicGrid" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="360"/>
<RowDefinition Height="360"/>
</Grid.RowDefinitions>
<TextBlock .../>
<GridView .../>
<GridView .../>
</Grid>
And in code behind
if (//Reach the right side)
{
if (related.Visibility == Visibility.Collapsed)
{
related.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}
if (// Move away from right border)
{
related.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
It works to some point. But the animation is jumpy. Sometime, the scrollviewer even refuse to go back to the beginning. I guess the problem is when I adding/removing ui control at runtime, the scrollviewer doesn't handle it quite well.
I'm wondering is there a better way to achieve this feature? Any suggestion is welcomed.
You can add a child control in a grid by calling grid.Children.Add(newChildControl). You can also assign the child control to specific row/column/span by calling Grid.SetRow/Column/RowSpan/ColumnSpan.
I am making a UI in WPF, I have a bunch of functional areas and I use a Grid to organize it.
Now the Grid that I want is not uniform, as in, some functional area will span multiple cells in the Grid. I was wondering what the best practise is in solving this. Should I create one grid and then for each functional area set it to span multiple cells, or should I split it up into multiple nested Grids.
In this image, the leftmost panel (panels separated by the gray bar) is what I want. The middle panel shows one grid where the blue lines are overlapped by a functional area. The rightmost panel shows how I could do it with nested grids. You can see the green grid has one horizontal split. In the bottom cell is the yellow Grid with a vertical split. In side the left cell is the red Grid with again a horizontal split.
Grids http://www.freeimagehosting.net/uploads/08f2711bae.jpg
I was just wondering what is best practise, the middle or the right panel.
UPDATE: Just for clarification, a more 'code oriented' example:
The Middle panel
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Menu Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<uc:Info Grid.Row="1" Grid.Column="0" />
<uc:Control Grid.Row="2" Grid.Column="0" />
<uc:Simulation Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
</Grid>
The Right panel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<uc:Info Grid.Row="0" />
<uc:Control Grid.Row="1" />
</Grid>
<uc:Simulation Grid.Column="1" />
</Grid>
</Grid>
Update: I have to admit that now that I wrote out the code for both approaches, the "span" solution looks a lot better.
I would personally go with your middle layout using a single grid with column and row spans to structure the overall layout of the UI, then put a panel in each of those sections to contain the actual controls (and possible further detailed layout).
I would recommend to create one master grid divided into functional areas, then create separate grids/stackpanels/etc in these areas.
You may not know the requirements for each functional area, so you can arrange their elements freely and switch bettween layouts. When you put everything in one grid with span columns and/or rows - you would get a "hard to manage" layout.
I am afraid I am unable to distinguish your solutions with the color in the different grids and sub-grids.
What I can advise is to create a UserControl for each functional area, then have a grid to arrange these areas.
Each UserControl is then free to create its own layout (with another grid, or a simpler StackPanel, or whatever) and is responsible to display a data subset/handle user events in its own area.
The outer grid is then an arbiter for things that involve more than one area (e.g. event forwarding between areas).
Frankly i would go for a dockpanel or like that for top level composition, and grids for low level