I have a Grid with its background as black an opacity to 0.5 and in it is there another grid with opacity to 1 and background as White. But the inner grid still shows as its opacity was 0.5
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Black" Opacity="0.5" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>
I'm trying to emulate a win8 alert screen there is another way to do this? or How to prevent this inheritance? why this happen?
A little messy but this should work i think. Basically controls are stacked. So having the grid come after the first grid it shouldn't effect the opacity. May need to be tweaked, but something along the lines of this should work:
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="3" Background="Black" Opacity="0.5" />
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>
Related
I am new in UWP and I get some misunderstanding grid RowDefinitions and ColumnDefinitions as is mentioned in oficial doc. I have to make a custom list element, something like this:
but I can't handle it. In fact the main problem is how to set fill_parent property for a child view.
You can use this method like it's indicated in your mentioned docs. As is described in your img the last element it's in the middle vertically, so this layout will be:
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="24" />
<RowDefinition
Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="44" />
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="10" />
</Grid.ColumnDefinitions>
<Rectangle
Fill="Red"
Grid.RowSpan="2"
Grid.Column="0"/>
<Rectangle
Fill="Green"
Grid.Row="0"
Grid.Column="1" />
<Rectangle
Fill="Yellow"
Grid.Row="1"
Grid.Column="1" />
<Grid
Grid.RowSpan="2"
Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Rectangle
Fill="Gray"
Grid.Row="1"/>
</Grid>
</Grid>
For simplicity and clarity I was using Rectangle
Filling the space can be done with
width="*"
And the small complexity in your layout could be handled with nested grid system.
Here is the beginning, not the complete solution for your layout.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
</Grid>
</Grid>
I've done a google search already and many people have said to remove all the height/width/margin properties, but this doesn't seem to work for the text boxes where you enter the binary value and the decimal value. Right now everything will resize accordingly if you drag the window, but the buttons will still cut out sometimes.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Binary to Decimal Converter" FontSize="25" FontFamily="Times New Roman" FontWeight="Bold" TextAlignment="Center" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="1"/>
<TextBox x:Name="binaryValue" Grid.Column="3" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" TextChanged="binaryValue_TextChanged" FontFamily="Times New Roman" Padding="0" Margin="0,0,0,10"/>
<TextBox x:Name="decimalValue" Grid.Column="1" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" FontFamily="Times New Roman" TextChanged="decimalValue_TextChanged" Padding="0" Margin="0,0,0,10"/>
<TextBlock x:Name="textBlockBin" TextWrapping="Wrap" Text="Binary Value:" Grid.Column="1" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<TextBlock x:Name="textBlockDec" TextWrapping="Wrap" Text="Decimal Value:" Grid.Column="3" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<Button x:Name="buttonConvert" Content="Convert!" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="2" Grid.Row="5"/>
</Grid>
</Page>
Your problem comes because you are using * (relative sizes) for your column heights and widths.
Because your text is a fixed size, it would be better to give the columns and rows a fixed size also in those cases. Then you can use * for the edges, so that it scales around the text.
Alternatively, you can use Auto.
For example:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You can then give the Page a minwidth and minheight to prevent it shrinking smaller than the content.
I have the following Window
Now if I try to pull down the Gridsplitter I can only as far as the blue Grid fits in the visible Window. But when sliding down the splitter I want a scrollbar to appear and be able to pull it down to the botton until the blue Grid is not visible any more.
<Window.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Menu Name="MainMenu" Grid.Row="0">
</Menu>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto">
<views:MyView></views:MyView>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
<StatusBar x:Name="StatusBar" Grid.Row="2">
</StatusBar>
</Grid>
</Window.Content>
What do I have to change here?
Move your ScrollViewer further down so it wraps the blue ContentControl in row 2, and ensure the ContentControl has a Height or MinHeight set.
ScrollViewers allow their child to take up as much space as they want, and only shows scrollbars if the child object gets larger than the ScrollViewer size.
Also as a side note, you can remove some of those extra Grid's in your layout to make it easier to read. Here's an example with a bunch of them removed, and the first one being replaced with a DockPanel :)
<DockPanel>
<Menu Name="MainMenu" DockPanel.Dock="Top" Height="25" />
<StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom" Height="25"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="6" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<views:MyView x:Name="Green" Grid.Column="0" />
<GridSplitter Grid.Column="1" Width="6" />
<Grid Grid.Column="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<views:ListView x:Name="Yellow" Grid.Row="0" />
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
<ContentControl x:Name="Blue" MinHeight="400"/>
</ScrollViewer>
</Grid>
</Grid>
</DockPanel>
Hope you find a better solution XD as mine use a code behind
I used the DragDelta event of the control GridSplitter and enlarge the height of the grid so the ScrollBar can be activated
The xaml Code:
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter ResizeDirection="Rows" Grid.Column="0" Width="6"></GridSplitter>
<ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto" Grid.Column="1" >
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="7" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
<GridSplitter Grid.Row="1" Height="7" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" DragDelta="GridSplitter_DragDelta" />
<Grid Grid.Row="2">
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
The code Behind:
private void GridSplitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (e.VerticalChange > 1500 || e.VerticalChange > -15000) return;
if (e.VerticalChange > 0 || Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility))
{
this.MainGrid.Height = this.MainGrid.ActualHeight + e.VerticalChange;
}
e.Handled = true;
}
Note:
When the scrollbar is no more visible I stop shrinking the grid (keep the grid stretshed) that’s the meaning of the condition
Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility)
Hope this could help you and thx for the question :)
if you want to display a vertical scroll bar for each part in the splitted grid try the following code :
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
<local:BusyUserControl Width="200" Height="200"/>
</DockPanel>
<GridSplitter Grid.Column="0" Width="6"></GridSplitter>
<Grid Grid.Column="1" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="7" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" >
<Grid >
<views:ListView x:Name="Yellow" ></views:ListView>
</Grid>
</ScrollViewer>
<GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="2" >
<Grid Grid.Row="2" >
<ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
otherwise clarify your need
Hi I've been searching for a solution with no success ...
I want a grid that resembles:
+-------+----------------+
| | |
+-------+----------------+
| |
| |
| |
+-------+----------------+
| | |
+-------+----------------+
Thank you in advance!
It looks like a 3-row, 2-column Grid with proportional sizes:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
</Grid>
The 5 cells would be like:
Top-left: Grid.Column="0", Grid.Row="0"
Top-right: Grid.Column="1", Grid.Row="0"
Center: Grid.Column="0", Grid.Row="1", Grid.ColumnSpan="2"
Bottom-left: Grid.Column="0", Grid.Row="2"
Bottom-right: Grid.Column="1", Grid.Row="2"
Now, that is a very simple grid. Two columns and three rows with the second row content spanning two columns... it doesn't get much simpler than that...
<Grid Width="640" Height="480">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" BorderBrush="Red" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Green" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="1" BorderThickness="2" BorderBrush="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Grid.Column="0" Grid.Row="2" BorderBrush="Red" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Grid.Column="1" Grid.Row="2" BorderBrush="Green" Margin="1" BorderThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
Super late answer, sorry. Hopefully it will help someone who is looking for it in the future, like I am. In looking for an answer to the same question, I stumbled across this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1"
Grid.ColumnSpan="2">
<!-- Code -->
</Border>
</Grid>
The main portion of that being 'Grid.ColumnSpan="2"'
I want to prevent a gap from appearing in my wpf window without modifying the behavior of the remaining splitters. Please note that the longest vertical splitter is supposed to be able to slide to the left; I just don’t want the gap to appear when it is moved. A comment has been added to the GridSplitters that make up the undesired gap. How do I prevent the gap from appearing? My XAML code is listed below:
<Window x:Class="MyAdvancedGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="480"
Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"
Background="Black"
Height="5" /> <!-- A gap involves this splitter.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/> <!-- A gap appears between this and the splitter above when this vertical splitter is moved to the left.-->
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>
</Window>
Its because your horizontal splitter is only spanning 2 columns.
If you want the horizontal splitter to span all 3 columns (left of the tall vertical splitter), then you should put it in Column 1, and make the ColumnSpan be 3.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="3"
Background="Black"
Height="5" /> <!-- see changes above.-->
<GridSplitter Grid.Column="1"
HorizontalAlignment="Left"
Grid.RowSpan="2"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
<GridSplitter Grid.Column="2"
Grid.Row="1"
Grid.ColumnSpan="1"
HorizontalAlignment="Right"
Grid.RowSpan="1"
Background="Black"
VerticalAlignment="Stretch"
Width="5"/>
</Grid>