I have a page with a two row grid. In the first row I have a databound ItemsControl and in the second row a simple textbox.
The problem is that while the page is loading (i.e. it is animated into the view), the ItemScontrol's content overflows over the entire grid. Only after the page is fully shown after a short while (it seems exactly 1 second, although I haven't measured it), the contents get properly clipped to the Grid row.
Here's what happens while loading the page (not that there are some transitions on this screenshot however they do not have an effect on this behavior):
After the page is fully loaded, contents get clipped properly:
Here's the pseudo-XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ItemsControl ItemsSource="{Binding}">
<!-- grid for each row -->
</ItemsControl>
</StackPanel>
<StackPanel Grid.Row="1">
<TextBox />
</StackPanel>
</Grid>
I figured out that clipping works properly if I set the ItemsControl's (but not the StackPanel's!) height to a fixed value, however of course I don't want the height to be fixed.
Any ideas?
Related
I have one xaml page where there are multiple UI elements are there, and i wanted narrator to pick some UI element and ignore other. So with below code you can, see that I have four Grid Row Definition the last UI element is rendered on screen as Grid.RowSpan=4 and other UI elements also got intialized just for performance reason, but it won't be visible intially untill the last element Visibility will be set to Collapsed.
What i want when that "UserControlView1" control is rendered narrator should not pick other UI element, but once that is gone then narrator should start picking those UI element.
I have tried IsTabStop=false but not sure why it is not working.
<Page
xmlns:mvvm="using:Prism.Windows.Mvvm"
mvvm:ViewModelLocator.AutoWireViewModel="True"
// some random namespaces declaration
Loaded="PageLoaded">
<Grid>
<Grid.ColumnDefinitions>
// some Grid Column definition
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
// "4" Grid Row definition...
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ctl:UserControlView2
x:Name="UserControlView2"
Grid.Row="1"
Grid.ColumnSpan="2"
IsTabStop="False"/>
<ctl:UserControlView3
x:Name="UserControlView2"
Grid.Row="2"
Grid.Column="0"
IsTabStop="False" --> I have set IsTabStop to false />
<ctl:UserControlView4
x:Name="UserControlView3"
Grid.Row="3"
Grid.Column="0"
IsTabStop="False" --> I have set IsTabStop to false />
<ctl:UserControlView1
d:Visibility="Collapsed"
x:Name="UserControlView1"
x:Load="{x:Bind ViewModel.UserControlView1}"
Grid.Row="0"
Grid.RowSpan="4" // as it span to four rows the reason being its gets render at top of the screen and other UI element will be there beneath it.
Grid.ColumnSpan="2"
TabIndex="0"/>
</Grid>
</Page>
I want to show a listview and an image on a uwp page.Items to listview are adding dynamically. When loading page user can see the full listview. and if he clicks any of it's row the list view will filter based on that clicked row.Then user can see filtered listview and an image below the listview. If the user clicks on image it will again show the full listview without image. Now my issue is I want to display listview with scroll view(scrolling should work when listview height reaches end of screen). and if the user clicks on any row of listview,the height of image should fill from end of filtered listview to bottom of screen.
I have done like below.
<Grid HorizontalAlignment="Stretch" >
<Grid.RowDefinitions >
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView x:Name="ItemListView" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
//binding items here
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Border Background="Green" Grid.Row="1" x:Name="Bg" Tapped="Bg_TappedAsync" Visibility="Collapsed">
<TextBlock x:Uid="txt_string1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="DetectFromContent" FontSize="15" MaxLines="4" FontFamily="Calibri" FontStyle="Italic"/>
</Border>
</Grid>
When I did like above both list view and image(in code it is a Border) takes half half portion of screen.So when showing filtered listview (it may have only one row) a gap is occurring between listview and image. I want to fill the image with remaining height of screen. How can I achieve it? I don't want to set MaxHeight of listview. Because it should run on various size of devices
When you create two rows with a * for RowDefinition.Height, you will get two equally sized Grid rows, which is the behavior you are seeing. A star gives the row all space that is left after evaluating all rows with Auto and hardcoded pixel height. When there are multiple rows with a star, they will divide the remaining space equally. You can also use values like 2* to say that the row should have twice the height of a * row, so you can create "fractions" like 2:1.
In your case however, you might want to rather use Auto for the second row's Height. Auto will give the row the size it actually needs, so when the image is not displayed, it will effectively have zero height. When the image is displayed, it will be as high as the image and the list will take up the rest of the Grid height thanks to the *.
In my app I'd like to have a page layout as shown on this picture:
It has two content blocks (depicted as plain and shaded rectangles) and two states. In normal (1st) state plain block takes all the screen and is fully visible while shaded is hidden behind screen. In 2nd state shaded block is fully visible and also a small part of plain block is on screen, the rest of it is hidden.
I'd also like to have a nice transition from one state to another. I understand I'd probably need to use ViewStates for this. What I don't understand it what XAML control should I use to represent content blocks. So this is the question: what XAML controls would allow me to express this layout as elegantly and concisely as possible?
How about a grid with 2 rows. A pivot control with your 2 states in each pivot item in first row and your fixed content in second row.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<phone:Pivot Margin="0,-24,0,0">
<phone:PivotItem Background="Blue">
<StackPanel>
<TextBlock Text="Transition content 1" />
</StackPanel>
</phone:PivotItem>
<phone:PivotItem Background="Brown">
<StackPanel>
<TextBlock Text="Transition content 2" />
</StackPanel>
</phone:PivotItem>
</phone:Pivot>
<StackPanel Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Fixed content" />
</StackPanel>
</Grid>
Swiping on the top box will animate as the standard pivot animation.
If you don't want the user to be able to flick and rather control the two states programmatically then you can simply add IsHitTestVisible="False" on the root pivot control then set the SelectedIndex on the pivot to switch between states.
I have a simple TabControl done using templated RadioButtons and Grids which change visibility when IsChecked on a RadioButton changes, something like this:
<Grid Name="TabGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<RadioButton x:Name="RadioButton1" Content="Latest" Style="{StaticResource TabRadioButtonStyle}" IsChecked="True" GroupName="G1"/>
<RadioButton x:Name="RadioButton2" Content="Popular" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" GroupName="G1" Margin="30,0,0,0" />
</StackPanel>
Now, every grid inside has EntranceThemeTransition defined, something like this:
<GridGrid.Row="1" Visibility="{Binding ElementName=RadioButton1, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Grid.ChildrenTransitions>
As I understand, the EntranceThemeTransition displays only when the items are first shown. Is there a way to force EntranceThemeTransition to repeat every time the visibility of the Grid changes?
This doesn't exactly answer your questions but I think will help many people landing on here:
If you want to repeat the entrance animations for items in a databound listbox, I have found only one way of doing this:
Set the DataContext of the listbox to null (this removes the items).
Set the DataContext of the listbox back to your list/observable collection (this recreates the items and adds them to the listbox with an animation).
By reseting the DataContext you are creating new listbox items and they aren't marked as having entered the view yet.
In regards to your question; I think you'll need to create a new version of the grid to play the entrance animation again.
I have a Pivot control in my Windows Phone Mango application and one the pivot items has a listbox. It works perfectly when I have only a ListBox as content of the PivotItem.
<controls:PivotItem Header="Item1">
<ListBox
x:Name="longListBox"
ItemsSource="{Binding AllItems}"
Margin="12, 0, 12, 0" Width="440"
ItemTemplate="{StaticResource ItemTemplate}" />
</controls:PivotItem>
Now I would like to add more controls above the list in the PivotItem, say an Image.
<controls:PivotItem Header="Item1">
<StackPanel>
<Image
Source="/Images/header.png"
Height="48"
Width="48"/>
<ListBox
x:Name="longListBox"
ItemsSource="{Binding AllItems}"
Margin="12, 0, 12, 0" Width="440"
ItemTemplate="{StaticResource ItemTemplate}" />
</StackPanel>
</controls:PivotItem>
However, with these changes PivotItem vertical scrolling works very strangely, moving listbox items downwards instead of upwards. Essentially, items on the bottom of the ListBox are not accessible.
I've tried setting StackPanel height to some huge number, tried adding ScrollViewer, but can't get it to work.
How can I fix the scrolling problem?
StackPanel gives its children whatever height/width they ask for, and that makes the inner ListBox miscalculates its actual height and then its ScrollViewer won't work properly.
Try changing the StackPanel to a Grid with two rows and it should work.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>