Something similar to this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
</Grid>
But this would change the whole Grid. I just want to change the background color of specific row. How?
Add another Grid inside the Grid like this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid Background="Blue" Grid.RowSpan="2" Grid.Column="0"/>
</Grid>
Related
I am trying to create a Flyout menu for each grid cell that opens via dropdown button. However, whatever I try, I cannot get it to work or even build I should say.
My code is
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Label Grid.Column="2" Grid.Row="0" Text="1" />
<Label Grid.Column="3" Grid.Row="0" Text="2" />
<Label Grid.Column="4" Grid.Row="0" Text="3" HorizontalOptions="Start" />
<controls:DropDownButton Grid.Column="4" Grid.Row="0" HorizontalOptions="End"></controls:DropDownButton>
but I get the error
XLS0503 A value of type 'DropDownButton' cannot be added to a collection or dictionary of type 'IGridList1'
Is there some parent element I need to add before?
UWP application doesn't have ViewCell element.
Look for all available GUI and Layout elements in WinUI3 or WinUI2
Read more about WinUI2 here
I would like to know if it is possible to collapse a row in a grid ?
I already collapsed the controls inside my row (using Visibility = "Collapsed" + Height = "Auto").
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Test 1"/>
<ProgressBar Grid.Column="1" Value="90"/>
<Label Content="Test 2" Grid.Row="1" Visibility="Collapsed"/>
<ProgressBar Grid.Column="1" Grid.Row="1" Value="50" Visibility="Collapsed"/>
<Label Content="Test 3" Grid.Row="2"/>
<ProgressBar Grid.Column="1" Grid.Row="2" Value="20"/>
</Grid>
But I would like to collapse all the row, whitout doing it for each control in the row, like that :
<RowDefinition Height="Auto" Visibility="Collapsed"/>
Is it possible ? Or should I use something other than a grid ?
Thanks.
When compiling on mobile, an empty line appears that is not in the code. Everything is fine in the studio in the designer, but on the phone everything is different. Where could the error be?
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid Row="0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Column="0">
<SearchBar x:Name="SearchNickname"
BackgroundColor="{Binding BackColor}"
CancelButtonColor="{Binding TextColor}"
PlaceholderColor="{Binding TextColor}"
TextColor="{Binding TextColor}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Placeholder="Введите свой ник"
SearchCommand="{Binding SearchCmd}"
Text="{Binding SearchText, Mode=TwoWay, UpdateSourceEventName=TextChanged}"
MaxLength="100"/>
</Grid>
<Grid Column="1" BackgroundColor="{Binding BackColor}">
<Button ImageSource="https://assets.laut.fm/f69a3423e545055c32430e0a77ebe148?t=_120x120"
BackgroundColor="{Binding BackColor}"
Command="{Binding SettingsCmd}"/>
</Grid>
</Grid>
Where does this strip come from? enter image description here
Image in the designer studio enter image description here
That strip along the top is the Header/Navigation Bar, which you get by default in Xamarin Forms Pages. You can modify it or suppress it.
My UI elements' layout (nest relation) is:
toolbarGrid -> toolbarCanvas -> toolbarPanel -> some buttons
My purpose is to make animation of those buttons.
The issue is that I use Debug.Write() to monitor the Width and ActualWidth parameters of the UI elements. And I found that when App screen size is changed, only toolbarGrid size is changed accordingly. While the other UI elements' sizes are not changed at all, although I use Binding method to bind their Width and ActualWidth to toolbarGrid.
So how can I set their Width and ActualWidth so that they could change according to App screen's real size?
toolbarPanel width = 1920, actualWidth = 1920
toolbarGrid width = NaN, actualWidth = 1034
toolbarBackground width = 1920, actualWidth = 1920
toolbarCanvas width = 1920, actualWidth = 1920
<Grid x:Name="gridTotal">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
<Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>
<Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
<Canvas x:Name="toolbarCanvas" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
<RelativePanel x:Name="toolbarPanel" Canvas.Top="0" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
<Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png"
Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}"
Height="{Binding ElementName=toolbarGrid, Path=ActualHeight}" Stretch="Fill" />
<Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0"
Height="{Binding ElementName=recTangle1, Path=ActualHeight}"
Width="{Binding ElementName=recTangle1, Path=ActualWidth}">
<Button x:Name="toolbarHistory" Style="{StaticResource toolbarImageStyle}">
<Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
</Button>
</Viewbox>
</RelativePanel>
</Canvas>
</Grid>
</Grid>
I tried to understand your problem. If the problem was that u like to Elements follow actual screen size this one works. I changed the XAML code and hoping that next solution works fine for you. I rid of the Canvas because that element cause the problem. Anyway, in this example u do not need it (unless u have planned some other use later). And also to set Row/Column Width/Height values is unneeded. Bindings are also unnessessary.
<Grid x:Name="gridTotal">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
<Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>
<Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
<RelativePanel x:Name="toolbarPanel" Canvas.Top="0">
<Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png" Stretch="Fill" />
<Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0">
<Button x:Name="toolbarHistory">
<Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
</Button>
</Viewbox>
</RelativePanel>
</Grid>
</Grid>
I have a rectangle that is expanding just fine horizontally, but not vertically:
<Grid x:Name="MainDisplay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Viewbox MinWidth="400" MinHeight="400" x:Name="Scenario4ImageContainer" Stretch="Fill" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch">
<Rectangle MinWidth="400" MinHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Blue"/>
</Viewbox>
When I set the MinHeight property to 700 it takes up all the screen space, but I want to take up however much room it can get.
Also this outer grid sits inside of this parent grid:
<Grid x:Name="Output" Background="#1D1D1D" Margin="0,2,0,-2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I've tried out the XAML you posted and the Rectangle is expanding just fine. The only thing limiting it is the outer Grid which defines two rows of equal height. Try making the second row narrower and you'll see the Rectangle expand:
<Grid x:Name="Output" Background="#1D1D1D" Margin="0,2,0,-2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid x:Name="MainDisplay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Viewbox MinWidth="400" MinHeight="400" x:Name="Scenario4ImageContainer" Stretch="Fill" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch">
<Rectangle MinWidth="400" MinHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Blue"/>
</Viewbox>
</Grid>
</Grid>