I have a Silverlight 4 game that I'm attempting to port to WinRT. It makes heavy use of Blend's FluidMoveBehavior to animate item transitions between containers (items float from one container to another). It appears that this functionality is missing from WinRT, and I have been unable to find a substitute.
In Silverlight, this XAML does it all:
<ItemsPanelTemplate x:Key="TransitioningPanelTemplate">
<StackPanel Orientation="Horizontal" Margin="0" Background="Transparent">
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.400" Tag="DataContext">
<il:FluidMoveBehavior.EaseY>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseY>
<il:FluidMoveBehavior.EaseX>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseX>
</il:FluidMoveBehavior>
</i:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
I looked into Transitions as suggested in this post, but this appears to only work within a single container.
Is there some use of Transitions that will allow this behavior? If not, is anyone aware of possible alternatives?
Try this
<ItemsPanelTemplate x:Key="TransitioningPanelTemplate">
<StackPanel Orientation="Horizontal" Margin="0" Background="Transparent">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<Your Transitions />
</TransitionCollection>
</StackPanel.ChildrenTransitions>
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.400" Tag="DataContext">
<il:FluidMoveBehavior.EaseY>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseY>
<il:FluidMoveBehavior.EaseX>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseX>
</il:FluidMoveBehavior>
</i:Interaction.Behaviors>
</StackPanel>
Related
I have been fine-combing the web for any guidance, discussions or experience on this and I think I can safely say there’s nothing to be found.
We are developing a set of controls for UWP which we plan to open source and make available for free. One of the controls we are building is a TimeSpanPicker control, which will essentially look and behave like the TimePicker control, but instead of being limited to a time of day (i.e. 24 hour interval) it will allow the user to edit an arbitrary TimeSpan.
From what I have been able to piece together from the visible metadata of the Windows Runtime API, using the built-in TimePicker control for reference, I am realizing the following types of components are involved:
The TimePicker control itself which inherits from Control
The TimePickerFlyout class which inherits from PickerFlyoutBase
The TimePickerFlyoutPresenter control, which inherits from Control
I realize I need to mimic this pattern and write these three components for our picker control, but I can find no information about how these pieces fit together, and from the API surfaces alone I don’t think it’s possible to figure it out.
Specifically, the primary things I’d like to understand are:
How is the TimePickerFlyout incorporated into the TimePicker class? I can see no reference to a flyout anywhere within the default template of the picker control.
What role does the TimePickerFlyoutPresenter control play, and how is it incorporated into the TimePickerFlyout class? The TimePickerFlyout class has no template – so how does it instantiate and communicate with the TimePickerFlyoutPresenter control?
What are the basic steps to mimic this pattern?
What is the intended use of the ShouldShowConfirmationButtons and OnConfirmed virtual methods on PickerFlyoutBase? When I override them in my concrete implementation, they are never called.
I’d be very thankful for any guidance!
I had the same prob, but after work around, I did the following to change the TimePickerFlyout's background color and the size of the buttons on its footer and other style as I needed.
Navigate to C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
(Note this may change depending on your SDK version)
Open the generic.xaml file
Copy the TargetType="TimePickerFlyoutPresenter" section to your App.xaml, and make changes whatever you want, All the Flyouts will be changed accordingly.
OR
Copy this style and put it in App.xaml.
<!-- Default style for Windows.UI.Xaml.Controls.TimePickerFlyoutPresenter -->
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="0" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
MaxHeight="396">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="44" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="FirstPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="SecondPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="ThirdPickerHostColumn" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="44" />
<Border x:Name="FirstPickerHost" Grid.Column="0" />
<Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" />
<Border x:Name="SecondPickerHost" Grid.Column="2" />
<Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" />
<Border x:Name="ThirdPickerHost" Grid.Column="4" />
</Grid>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="2" VerticalAlignment="Top" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" Grid.ColumnSpan="2" />
<Button x:Name="AcceptButton" Grid.Column="0" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
<Button x:Name="DismissButton" Grid.Column="1" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So, since a couple of folks asked me to follow up on this, I was actually eventually able to figure all this stuff out, with some help from Jim Walker (MSFT). It's been a long time coming, but I now decided to revisit this and finally finish those TimeSpanPicker and TimeSpanEditor controls I was working on.
https://github.com/IDeliverable/UwpControls
Run the TestHost project to see both controls in action.
The repository contains a few other controls as well; the part containing the TimeSpanPicker and TimeSpanEditor controls is here:
https://github.com/IDeliverable/UwpControls/tree/master/src/IDeliverable.Controls.Uwp.TimeSpanPicker
The code should hopefully serve as a really good sample for anyone interested in how to build a custom picker control, but the controls should also be useful for anyone needing to add TimeSpan editing functionality to their app. I really went to town with these controls, sweating the details and non-obvious things like accessibility, support for multiple input modes (touch, keyboard, mouse), system theme compliance, full templating support, etc.
Documentation for these two controls is work in progress at the moment.
I plan on packaging these controls up as NuGet packages soon, but for now, you'll have to consume them as source code. I'm also going to check if there's any interest incorporating them into the Window Community Toolkit.
I'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.
There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).
I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.
Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.
<Page.Resources>
<ResourceDictionary>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
<Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
</Style>
<DataTemplate x:Key="SearchResult">
<StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
<Border Background="Gray" MinWidth="235">
<Grid Height="155">
<Image Source="{Binding SearchResultImage}"
Style="{StaticResource ImageStyle}" />
<Rectangle Fill="{StaticResource BackgroundBrush}" />
<StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
<TextBlock Text="{Binding SearchResultName}"
Style="{StaticResource TextBlockStyle}"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Button Style="{StaticResource ButtonStyle}"
Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding}">
<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
<SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
<TextBlock x:Uid="ViewRecipeCommandTextBlock"
Text="View Recipe"
Style="{StaticResource TextBlockStyle}" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
<TextBlock x:Uid="RecipesTitle" Text="All Recipes"
Style="{StaticResource TextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
<ListView x:Name="ResultsListView" Grid.Row="2"
ItemsSource="{Binding AllRecipes}"
ItemTemplate="{StaticResource SearchResult}" />
</Grid>
What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.
By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.
I am currently learning Windows Phone 8.1 app development. I am going through this Channel 9 series of video tutorials. They are useful but unfortunately are for Windows Phone 8, not 8.1 and so there are some things I can't follow. I am stuck in such a situation.
I want to have the following layout driven by some data:
So far I have the following code:
<Pivot x:Uid="Pvt">
<PivotItem Header="{Binding Animals.Title}">
<GridView ItemsSource="{Binding Animals.Items}">
<GridView.ItemTemplate>
<DataTemplate>
<!-- not sure what would go in here -->
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</PivotItem>
</Pivot>
But not sure what element I'm supposed to have in the <DataTemplate>!
Gridview works fine in Windows Phone apps. Here is code from one of my apps in the app store. You need to set the size of the outer most 'Grid' of the DataTemplate. You won't be able to get the grids to fit the screen exactly unless you do some dynamic sizing after the UI is loaded.
<GridView Grid.Row="2" Margin="0,0,0,0"
ItemsSource="{Binding InfoTypeList}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="120" Height="120">
<Border Background="{ThemeResource PhoneAccentBrush}">
<Image Source="{Binding ImagePath}" Stretch="Uniform" Margin="10,10,10,20"/>
</Border>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" FontSize="18" HorizontalAlignment="Center" FontWeight="SemiBold" IsTextScaleFactorEnabled="False"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="20 20 0 0"/>
</Style>
</GridView.ItemContainerStyle>
</GridView>
EDIT:
I played around with it and you can get it to look more like your picture (fit the items to the screen) by wrapping your GridView in a Viewbox and then limiting the number of rows by adding this to your GridView:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
You will have to play around with your margins to get the correct spacing.
This problem is about the listbox itself and not it's cells. If I put listbox into a viewbox, and click on an item, the whole listbox will be surrounded with a 1px border. I do not want that, because it is ugly. How to remove this border?
Details:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox Grid.Row="1" Stretch="Uniform">
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<Grid Width="200">
<ListBox ItemsSource="{Binding Rajzelemek}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentControl Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Content="{Binding Ikonja}" Width="25" Height="25" VerticalAlignment="Center" />
<TextBlock Text="{Binding}" VerticalAlignment="Center" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>
</Viewbox>
</Grid>
If I comment the <Viewbox Grid.Row.... part, everything is fine, but not scaled. I want stuff to get scaled, well that is why I use the viewbox, but I do not want this border:
The code above was put on a metro BlankPage1 too, and made the same thing.
I think you're looking for what's in the ListBoxItem template wherein there's a Rectangle acting as a Focus Visual, if you check out the default template you'll see it with a default brush attributed to it (FocusVisualWhiteStrokeThemeBrush) which you could either change in the template, or provide your own resource for it to find before it hits the default dictionaries like;
<SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="Transparent" />
Hope this helps.
EDIT
Sorry I was going by the picture you have, thought it was the item. In any case since your ViewBox is the culprit you just need to interact with the Border control within it >like you showed in a previous post of your own< where you're the one making that border. Something like;
<Viewbox>
<Viewbox.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</Viewbox.Resources>
...
</ViewBox>
This is probably something simple but I am tearing my hair out at the moment.
I want to display pushpins on a map from a model. So I have created a template for the pushpins
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="Resources/Pushpins/img.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
Then use it to a binded collection as follows:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Template="{StaticResource PushpinTemplate}" />
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
But what I want to be able to do is change the image source via a binding but am not sure how I go about doing this. What I was intending to do was to use a converter to change the image depending on an id within the collection if that alters the best way to do this.
Edit:
I got a little further:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}"/>
<m:Pushpin.Template>
<ControlTemplate>
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding Type,Converter={StaticResource ImageConverter}}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</m:Pushpin.Template>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
If I move the pushpin template into the </phone:PhoneApplicationPage.Resources> section then it fails. I am not sure why. I guess now I am trying to get to grips with my uinderstanding of how this all works
Just add the binding to the ControlTemplate
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding ImageUri}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
I would recommend a ImageUri (of type Uri) property that reflects what image to display, rather than using a converter. But a converter might also work, the bindings are done in the same way.