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.
Related
I use a GridView to display photos and I search an elegant way to allow user to add a new item to a form.
The form contains a lot of fields: it is displayed in a Pivot, where each PivotItem represents a category of the form.
Some categories contain one or more child items: they are displayed through a Master-Detail page.
It's in this page that I need to display a list of photos: as a photo represents a "sub sub item" of the form, I wouldn't manage the add of a new photo through the CommandBar. But I would like to use an "Add" button after the last item of the GridView containing the photos.
At this time I only found a solution that partially work:
Here is the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Photos" Grid.Row="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<GridView ItemsSource="{Binding images}">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Image Stretch="UniformToFill"
Source="{Binding bitmap_image}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}"
Height="100" Width="100">
<Viewbox>
<SymbolIcon Symbol="Add"/>
</Viewbox>
</Button>
</Border>
</StackPanel>
</Grid>
As I use a StackPanel, the Add button is no longer visible if I display 3 photos...
=> Is there a better way to do this? Or do you see a an alternative? I'm looking for doing this through a DataTemplateSelector, but that would require me to create a "false" object for displaying the add button...
As I use a StackPanel, the Add button is no longer visible if I display 3 photos...
If you don't mind the button is in the next line of your last photo, you can use WinRTXamlToolkit's WrapPanel instead of StackPanel to avoid the pictures goes out of the window and put the button inside the GridView's FooterTemplate:
Xaml:
<Page
x:Class="AddButtonSample.MainPage"
xmlns:controls="using:WinRTXamlToolkit.Controls"
...
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Photos" Grid.Row="0"/>
<controls:WrapPanel Orientation="Horizontal" Grid.Row="1">
<GridView ItemsSource="{Binding images}">
<GridView.FooterTemplate>
<DataTemplate>
<Button Command="{Binding Path=AddPhotoCommand}" Height="100" Width="100">
<Viewbox>
<SymbolIcon Symbol="Add"/>
</Viewbox>
</Button>
</DataTemplate>
</GridView.FooterTemplate>
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Image Stretch="UniformToFill"
Source="{Binding bitmap_image}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</controls:WrapPanel>
</Grid>
Result:
If you really want to put the Button side by side after the last item of GridView. The only Option is DataTemplateSelector.
The best solution might be to use a CommandBar and put the "Add" button in the very bottom of the panel, as that would be most consistent with UWP design guidelines. GridView also has a FooterTemplate, which allows you to add some XAML in the footer of the whole GridView (but not directly after the items).
If you still want to have the add item as part of the GridView contents, you will really need to use the fake item and a DataTemplateSelector. This solution is not very clean, but probably is the only simple way.
I tried to do something similar for my own app too, but there really isn't an obvious way to achieve it. A little background on what my app does: it's a flashcard app that displays decks of card in a gridview on the homepage, with an add button being at the front of the gridview. This is what I did:
for my deck class, I gave it a bool attribute isButton
in the observablecollection of decks, set the first item's isButton to true
make two datatemplates for the gridview (deck and button) and make a data template picker for the gridview, and check the isButton attribute
if isButton is true, the template picker will use the button template
otherwise use deck template
I have a UWP where I am loading from an XML file and showing it in a GridView and I am trying to enable Scrollbars in a way that allows me to stack and wrap items in all the available space like in the image below. The problem that I am having is that I cannot figure out how to enable the scrollbars so that I can scroll the boxes until I get to the end of the list.
So far I have got it to do what you see in the picture, which is wrapped the way I want but it fills all the available space and doesn't allow you to scroll vertically or horizontally (I only want to scroll one way but I have tried to see if I could go either way). Through a lot of trial and error I was able to get it to scroll one row or one column at a time to the end of the list but that is not the desired result either. Here is where I am with the XAML right now (trimmed down version of the screen shot).
<GridView x:Name="DataGrid1">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border Width="270"
Height="200"
Margin="5"
BorderBrush="Black"
BorderThickness="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Background="#87CEFA">
<TextBlock Margin="2"
HorizontalAlignment="Center"
FontSize="16"
FontWeight="Bold"
Text="{Binding Company}" />
</StackPanel>
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="2"
HorizontalAlignment="Right"
FontWeight="Bold"
Text="Code: " />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="2"
Text="{Binding Code}" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
So what do I need to do to enable the scrollbars the way that I want?
Make sure your GridView is in a Grid and not a StackPanel. It does not expand in a StackPanel.
To make it scroll in a StackPanel you have to specify the height of the GridView. This was the issue with mine :)
To my knowledge gridviews that are not showing scrollbars automatically are due to stackpanel's presence. So my solution here is to try remove stackpanel what so ever, and if I find the stackpanel that's responsible replace it with other kind of panel and work my way back up. It's totally a brute force kind of approach but it works most of the time.
And another piece of advice. In that process of replacing the stackpanel try to replace it with grid and try to divide it's rows and columns with widths and heights set to auto or star sizing instead of specifying it with actual numbers to see if it works this way. If it works then work your way up speicifying it with actual numbers.
Here's your problem, in the definition of the ItemsWrapGrid you have:
ScrollViewer.VerticalScrollBarVisibility="Disabled"
this is going to mean that even if the scrollbar is shown it wont work.
Remove this line and you should get a working scrollbar.
Is there a way to dock a Windows Phone control to the bottom of a StackPanel? This is my basic layout:
<StackPanel Orientation="Vertical">
<TextBlock />
<TextBlock />
<UI:AdControl />
</StackPanel>
My StackPanel is filling up the whole window. The TextBlocks are aligned toward the top of the panel, that's what I want.
But I want the AdControl to dock at the bottom of the StackPanel (and therefore the bottom of the window).
I've found controls like DockPanel, but they seem to only work for WPF or Silverlight as far as I can tell.
This can easily be accomplished with a simple grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<Grid.RowDefinitions>
<StackPanel>
<TextBlock />
<TextBlock />
</StackPanel>
<UI:AdControl Grid.Row="1"/>
</Grid>
If you want exactly DockPanel for future use, make sure you look into open source implementations, there should be plenty of those out there!
I'd like to use different templates for the header of my pivot, if it's selected/active id like to use template A, if it's inactive/not selected, I'd like to use template B.
What I would like to do is pretty much the same as the facebook app for windows phone, where a small triangle/arrow is displayed on the active pivot. I'm not 100% sure how this is designed, if the icon and arrow is the header template, or if it's just the arrow, or if it's pivot at all...
I would appreciate if someone would shed some light on how this kind of UI can be achieved.
Ended up with a work-around for this
I removed the pivot header entirely and created a stand alone control to navigate the pivot
The nav-viewmodel, shared between the pivot and the Nav control, have a SelectedPage property, which changes when you navigate in the Nav control:
<AppControls:Nav Grid.Row="0"/>
That gives me full control of the layout of the selected menu item.
The SelectedPage property is bound to the pivots selectedindex:
full markup:
<Grid x:Name="LayoutRoot" DataContext="{Binding Nav, Source={StaticResource Locator}}" Background="#E8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<AppControls:Nav Grid.Row="0"/>
<phone:Pivot SelectedIndex="{Binding SelectedPage, Mode=TwoWay}" Grid.Row="1" x:Name="MainGui">
<phone:PivotItem x:Name="FrontPage">
<AppControls:Topnav Grid.Row="1" />
</phone:PivotItem>
<phone:PivotItem x:Name="PlacesPage">
<AppControls:PlacesControl Grid.Row="1"/>
</phone:PivotItem>
<phone:PivotItem x:Name="MapPage">
<AppControls:MapControl Grid.Row="1"/>
</phone:PivotItem>
<phone:PivotItem x:Name="SettingsPage">
<AppControls:Settings Grid.Row="1" />
</phone:PivotItem>
</phone:Pivot>
</Grid>
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.