I have code xaml like this:
Now I change Height of wp_2 to 450 and it's will bigger than stackMain, I set Canvas.ZIndex="100"in order to wp_2 can display all but it still hidden a part by stackPanel: Does anyone know to fix it? Thank you all!
1.Give margin -50 top so that it begin from top(reinitialize from top).
2.In wrap panel every child control start from ending position of its elder.
(In this case yellow one starts from ending of red.)
Give Margin="0,-50,0,0" to yellow one
<WrapPanel Background="Yellow" Height="50" Margin="0,-50,0,0" ></WrapPanel>
For the scenario that you mentioned using Grid is the best solution. Please refer to below code:
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WrapPanel Name="Wp1" Background="Red"/>
<WrapPanel Grid.Row="1" Name="Wp2" Background="Yellow" Height="500"/>
EDITED
As you want another layer for your WrapPanel than you can wrap it inside Canvas.
<Grid x:Name="mainGrid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<WrapPanel Name="Wp1" Background="Red"/>
<Canvas Grid.Row="1" Panel.ZIndex="100" Height="500" Width="{Binding ActualWidth, ElementName=mainGrid}">
<WrapPanel Name="Wp2" Background="Yellow" Height="400" Width="{Binding ActualWidth, ElementName=mainGrid}"/>
</Canvas>
</Grid>
Maybe you can do something like this?
<Grid Background="Aquamarine" Margin="0 0 0 -270">
<Grid Background="Black" Margin="0 10 0 313">
<StackPanel Margin="0 0 0 -500">
<WrapPanel Background="Red" Height="50"/>
<WrapPanel Background="Yellow" Height="450"/>
</StackPanel>
</Grid>
</Grid>
Related
I have a Listview, inside a ScrollViewer.
I have the problem that the scrollbar managed by the mouse does not work when the pointer is on the Listview, if I exit the list the scrollbar works correctly.
<ScrollViewer Grid.Row="2" IsTabStop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<Grid Grid.Row="2" MinWidth="500" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" ItemsSource="{Binding Notifications}" x:Name="ListeNouvellesNotifs" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemTemplate>
Do I have to change the object to show the list or can I use the Listview?
I tried to disable the ScrollViewer from the Listview, it doesn't work.
I believe that when the mouse is over it cannot recall the scroll of the container
You add a < listview.template >
<ScrollViewer Grid.Row="2" IsTabStop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid Grid.Row="2" MinWidth="500" MaxWidth="1000">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" ItemsSource="{Binding Notifications}" x:Name="ListeNouvellesNotifs" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.Template>
<ControlTemplate>
<ItemsPresenter></ItemsPresenter>
</ControlTemplate>
</ListView.Template>
<ListView.ItemTemplate>
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.
I am having a grid which contains six rows(each row is a stack Layout).
Inside my fifth row(i.e 5th stack layout) I am having a grid.I gave 100% width for that grid, but that grid is not occupying 100% of the width.
How do I fix this problem?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Grid Width="100%">
</Grid>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical">
</StackPanel>
</Grid>
I think , you can try removing the stack panel and you can use Grid.Row on Grid and that would fix the issue.
I haven't see percentages used in UWP before and even think it is not a valid syntax. I think you should use HorizontalAlignment="Stretch" instead to stretch the Grid to full width.
#Martin Zikmund and #Durai Amuthan.H's suggestions were all correct. The Width=100% in UWP XAML layout doesn't support.
If you want to make the Grid's has the same width as the StackPanel and automatically resize when the window resized, you could also remove the Width directly like the following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Grid Background="Red">
<TextBlock Text="abc"></TextBlock>
</Grid>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical">
</StackPanel>
</Grid>
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.
I am trying to create a scrolling list of panels with each one having a different appearance. I have used the variable sized wrap grid but my images don't seem to show correctly on the smaller panels. The items in the grid view are bound to a list of unknown length.
Screenshot of the current layout
Here is the xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyGridView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="Button_Click" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="190" ItemWidth="320" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate >
<DataTemplate x:DataType="data:Article">
<Grid Height="1080" Width="1440" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="{x:Bind image}" Stretch="UniformToFill" />
<StackPanel VerticalAlignment="Top">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity=".75" />
</StackPanel.Background>
<TextBlock FontSize="30" Margin="5" TextWrapping="WrapWholeWords" >
<Run Text="{x:Bind Name}"/>
</TextBlock>
<TextBlock Margin="5" FontSize="15" FontWeight="Thin" TextWrapping="Wrap" TextTrimming="WordEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="19" MaxHeight="38" >
"It is hard to miss the warnings. In the race to make computers more intelligent than us, humanity will summon a demon, bring forth the end of days, and code itself into oblivion. Instead of silicon assistants we'll build silicon assassins. The doomsday story of an evil AI has been told a thousand times. But our fate at the hand of clever cloggs robots may in fact be worse - to summon a class of eternally useless human beings."
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</local:MyGridView>
</Grid>
Ideally I want the layout shown in the xaml code below but I have two further problems:
1) I don't know how to turn this into a template so that I can bind to the list
2) The images in the inner-most grid do not layout according to the *-size proportions that I had set.
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36*"/>
<ColumnDefinition Width="648*"/>
<ColumnDefinition Width="36*"/>
</Grid.ColumnDefinitions>
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<Grid Name="grid1">
<Image Source="/Assets/obama.jpg" VerticalAlignment="Center" Stretch="UniformToFill" Margin="0 5 0 5"/>
<Rectangle Fill="Black" Opacity=".3" />
<TextBlock VerticalAlignment="Center" Text="Obama Is President" TextWrapping="WrapWholeWords" FontSize="133.333" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
<Grid Name="grid2" Margin="20 0 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Tag="blah" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}"/>
<Button Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}"/>
<Button Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}" />
<Button Tag="g" Grid.Row="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}" />
</Grid>
<Grid Grid.Column="1" >
<Grid.RowDefinitions>
<RowDefinition Height= "*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="test" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
<Button Content="test" Grid.Row="4" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
I know my code is likely quite messy since i am new to xaml and windows development in general but I'd appreciate any solutions.
Update: It's been pointed out that I specified grid dimensions which is causing my problem with the images, removing the grid height and width results in them showing properly. To follow up, is there now a way for the images to now change size depending on the window size (stretch/squish) up to a limit before the wrap effect takes place?