I am developing an application for windows phone 8.1 runtime i.e. store application. here I am applying Storyboard animation to stackpanel,
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="StkPnl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="StkPnl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
Here I am scaling it like:
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
Means from 0.2 to 1 and not from 0 to 1.
My question is: If I Scale object(here stackpanel) from 0.2 to 1 it looks like blurred till animation finishes. If I do it from 0 to 1 then it works great.
UPDATE 1:
<StackPanel x:Name="StkPnlName" Visibility="Collapsed" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,512,0,0" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Grid>
<Ellipse Height="38" Width="38" Fill="Blue"/>
<FontIcon Glyph="ode" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White" FontFamily="{StaticResource Resource}"/>
</Grid>
<TextBlock Text="Text" Foreground="Black" MaxHeight="38" FontSize="14" TextAlignment="Center" Width="74" TextTrimming="WordEllipsis" TextWrapping="Wrap" Style="{StaticResource Resource}" FontWeight="SemiBold"/>
</StackPanel>
What I am missing? Anyone came across this situation please suggest.
Thanks.
Related
Up there is my mock up animation on a static Page in UWP.
And here's the mock up XAML code
<Page.Resources>
<Storyboard x:Name="GridViewButtonPointerEnteredAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="100">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="GridViewButtonPointerExitAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="40">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="10">
<Grid x:Name="grid" Width="286" Height="286">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Assets/home/home_mydesk.jpg"/>
</Grid.Background>
<Border x:Name="GridViewButtonBackdrop" Background="Transparent" />
<Border VerticalAlignment="Bottom">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
<StackPanel Margin="20,20">
<TextBlock Text="My Desk" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" />
<TextBlock x:Name="textBlock" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="40" />
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
</Grid>
</Grid>
So I implemented that on my ItemsControl.ItemTemplate. I ran the application, but when I hover into an item, an error spits out and it said.
System.Runtime.InteropServices.COMException: No installed components were detected.
Cannot resolve TargetName GridViewButtonBackdrop.
at Windows.UI.Xaml.Media.Animation.Storyboard.Begin()
at Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute(Object sender, Object parameter)
at Microsoft.Xaml.Interactivity.Interaction.ExecuteActions(Object sender, ActionCollection actions, Object parameter)
at Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent(Object sender, Objec
Here's the XAML implementation for ItemsControl.ItemTemplate.DataTemplate
<Grid Width="286" Height="286" Background="{StaticResource DefaultThemeColor}">
<Grid>
<Image Source="ms-appx:///Assets/icon_pdf.png" Stretch="UniformToFill" Visibility="{Binding Converter={StaticResource IsPDF},ConverterParameter=pdf}"/>
<Image Source="ms-appx:///Assets/interactive_placeholder.png" Stretch="UniformToFill" Visibility="{Binding Converter={StaticResource IsPDF}, ConverterParameter=interactive}"/>
<Image Source="{Binding image.data.full_path}" Stretch="UniformToFill" />
</Grid>
<Border x:Name="GridViewButtonBackdrop" Background="Transparent" />
<Border MinHeight="0" VerticalAlignment="Bottom">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
<StackPanel Margin="20,20">
<TextBlock Text="{Binding title}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" />
<TextBlock Text="{Binding info.data.description}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" MaxHeight="40" />
<StackPanel Orientation="Horizontal" Margin="0,8,0,0" Visibility="{Binding Converter={StaticResource IsPDF},ConverterParameter=pdf}">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0" Visibility="{Binding Converter={StaticResource IsPDF}, ConverterParameter=interactive}">
<Image Source="ms-appx:///Assets/icon_interactive.png" Width="16" Height="16" />
<TextBlock Text="Interactive" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
I understand that it may not be seeing that GridViewButtonBackdrop element because it was inside an item collection.
How do I properly implement this animation in my ItemsControl items?
-- UPDATE --
Thanks for the optimization tip #JustinXL. I will change the ItemsControl into ListView and optimize the animation.
So here it is now
XAML
<Page.Resources>
<Storyboard x:Name="GridViewButtonPointerEnteredAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Description">
<EasingDoubleKeyFrame KeyTime="0" Value="115"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextDescription">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.0001">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="43">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="GridViewButtonPointerExitAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Description">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="115">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextDescription">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="10">
<Grid x:Name="grid" Width="286" Height="286">
<Grid.Clip>
<RectangleGeometry Rect="0,0,286,286" />
</Grid.Clip>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Assets/home/home_mydesk.jpg"/>
</Grid.Background>
<Border x:Name="GridViewButtonBackdrop" Background="#AF000000" Opacity="0" />
<Border VerticalAlignment="Bottom" Height="150">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
</Border>
<Border x:Name="Description" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform TranslateY="115"/>
</Border.RenderTransform>
<StackPanel Margin="20,20">
<TextBlock x:Name="textBlock" Text="My Desk" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="TextDescription" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="43" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5" />
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
<TextBlock x:Name="TextDescriptionExpanded" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="100" Margin="0,5,0,0" />
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
</Grid>
</Grid>
No, wrapping it inside a UserControl shouldn't impact the overall performance. That's actually how I would implement it. If you want further optimization, consider replacing your ItemsControl with a ListView which gives you UI virtualization (i.g. it only renders what you see plus a bit more) by default.
However, what would hurt the performance much more is that you are animating the MaxHeight property that could cause layout updates. This type of animations is called dependent animation which runs on the UI thread. Try to avoid them as much as you can.
So here's a simple workaround -
Duplicate the text, make the duplicated one span more lines and push it down to align with the original by changing its TranslateY, then hide it by default.
When hovering over, hide the original and show the duplicated and then animate its TranslateY to bring it up.
Note that TranslateY is part of the CompositeTransform which won't cause any costly layout updates.
I have a toolkit expander control in windows phone 8 it is working fine .I have to expand the items slowly.and collapse them slowly.What additionally i have to add to expand and collapse slowly
<toolkit:ExpanderView x:Name="Header1" FontSize="22" Foreground="Black" Expanded="Header1_Expanded">
<toolkit:ExpanderView.Header>
<Grid x:Name="GettinghereGrid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" >
<Image Source="/Assets/Menu/getting-here.png" Margin="8,0,0,0" HorizontalAlignment="Left" Stretch="None"/>
<TextBlock Text="Getting here & around" VerticalAlignment="Center" Margin="10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
<Rectangle Height="2" Grid.Row="1" Fill="#D6D6D6D6" Width="500" />
</Grid>
</toolkit:ExpanderView.Header>
<toolkit:ExpanderView.Items>
<HyperlinkButton Name="Gettingherebutton" Margin="-230,1,0,0" Background="#EBEBEB" Click="Gettingherebutton_Click" >
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting here" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Gettingaroundbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Gettingaroundbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Getting around" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Factsbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Factsbutton_Click_1">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="Facts & essenial info" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
<HyperlinkButton Name="Adayoutbutton" Margin="-230,0,0,0" Background="#EBEBEB" Foreground="#9DA1A9" Click="Adayoutbutton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB">
<TextBlock Text="A day out" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="#9DA1A9" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
<Rectangle Height="2" Fill="#D6D6D6D6" Width="500" Margin="-300,0,0,0" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
<UserControl.Resources>
<Style TargetType="toolkit:ExpanderView">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ExpanderView">
<Grid>
<Grid.Resources>
<QuadraticEase x:Key="QuadraticEaseOut" EasingMode="EaseOut"/>
<QuadraticEase x:Key="QuadraticEaseInOut" EasingMode="EaseInOut"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" GeneratedDuration="0:0:0.15" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.00" Value="0"/>
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.15" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" GeneratedDuration="0:0:0.15" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame x:Name="ExpandedToCollapsedKeyFrame" EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="1.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ItemsCanvas">
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.00" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource QuadraticEaseInOut}" KeyTime="0:0:0.15" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ItemsCanvas"/>
<DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemsCanvas"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandabilityStates">
<VisualState x:Name="Expandable"/>
<VisualState x:Name="NonExpandable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Line">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NonExpandableContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ListBoxItem x:Name="ExpandableContent" Grid.ColumnSpan="2" Grid.Column="0" toolkit:TiltEffect.IsTiltEnabled="True" Grid.Row="0" Grid.RowSpan="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0"/>
<ContentControl x:Name="Expander" ContentTemplate="{TemplateBinding ExpanderTemplate}" Content="{TemplateBinding Expander}" Grid.Column="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="11,0,0,0" Grid.Row="1"/>
<Grid x:Name="ExpanderPanel" Background="Transparent" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
</Grid>
</ListBoxItem>
<!--<Line x:Name="Line" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="2" Stretch="Fill" Stroke="White" StrokeThickness="3" X1="0" X2="0" Y1="0" Y2="1"/>-->
<ContentControl x:Name="NonExpandableContent" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding NonExpandableHeaderTemplate}" Content="{TemplateBinding NonExpandableHeader}" Grid.Column="0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed"/>
<Canvas x:Name="ItemsCanvas" Grid.Column="1" Margin="11,0,0,0" Opacity="0.0" Grid.Row="2">
<Canvas.RenderTransform>
<CompositeTransform TranslateY="0.0"/>
</Canvas.RenderTransform>
<ItemsPresenter x:Name="Presenter"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
Thnx in advance
After lot of trial and error i got this
By changing the keytime of easout function we are going to expand it # what we need similarly in easin function if we change it collapses slowly
<EasingDoubleKeyFrame x:Name="CollapsedToExpandedKeyFrame" EasingFunction="{StaticResource QuadraticEaseOut}" KeyTime="0:0:0.95" Value="1"/>
Every once in a while I get compiler exceptions in Blend for Visual Studio. Everything is compiling and working wonderfully, then suddenly BAM! I get compiler errors telling me that objects don't exist in a specific namespace WHEN THEY DO. I have to play with cleaning and rebuilding and closing and reopening Blend for a bout an hour before they go away. My libraries are all up to date and everything is otherwise fine. Does no one else have this happen to them? Please, I want it to stop it is an enormous time killer.
I get the compiler errors in Visual Studio as well.
Thanks.
Updates
For instance,
Error 5 The property 'DesignWidth' does not exist in XML namespace 'http://schemas.microsoft.com/expression/blend/2008'. Line 15 Position 5. C:\MyPath\MyControl.xaml 15 5 EasyBuilder
As far as I know, DesignWidth is does very much exist in that namespace.
The XAML (Not that it will help you any)
<UserControl x:Name="UserControl" x:Class="EasyBuilder.MainControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.ignore.com"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:surface="http://schemas.microsoft.com/surface/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:local="clr-namespace:EasyBuilder"
xmlns:res="clr-namespace:EasyBuilder.Infrastructure.Resources"
xmlns:system="clr-namespace:System;assembly=mscorlib"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<res:MainViewStrings x:Key="LocalStrings" />
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="Main" Source="{StaticResource Locator}"/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="{DynamicResource PageBackgroundBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenSelectionStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.15">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="SelectionClosedState"/>
<VisualState x:Name="SelectionOpenedState">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="OpenFileSelection">
<DiscreteBooleanKeyFrame KeyTime="0" Value="False"/>
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CloseFileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="CloseFileSelection">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OpenFileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="FileSelectionShadow">
<EasingDoubleKeyFrame KeyTime="0" Value="12.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="FileSelection">
<EasingDoubleKeyFrame KeyTime="0" Value="450"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FileSelectionControl">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame x:Name="ContentFrame" Margin="0,0,100,0" Grid.ColumnSpan="2" NavigationUIVisibility="Hidden"/>
<Grid x:Name="FileSelection" Grid.Column="1" Width="100" Background="{DynamicResource AsideSectionBackgroundBrush}">
<Border x:Name="FileSelectionShadow" Width="12.5" HorizontalAlignment="Left">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#3F000000" Offset="0"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Button x:Name="OpenFileSelection" Template="{DynamicResource InvisibleButtonTemplate}" HorizontalContentAlignment="Right" Panel.ZIndex="1" Margin="0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="SelectionOpenedState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock TextWrapping="Wrap" Text="{Binding OpenActionText, Mode=OneWay, Source={StaticResource LocalStrings}}" Margin="0,0,23,0" Style="{DynamicResource AsideSectionLabel}"/>
</Button>
<local:FileSelectionView x:Name="FileSelectionControl" d:LayoutOverrides="Width" Opacity="0" DataContext="{Binding Files, Mode=OneWay}"/>
</Grid>
<Button x:Name="CloseFileSelection" Template="{DynamicResource InvisibleButtonTemplate}" IsHitTestVisible="False" Opacity="0" Margin="0" d:IsHidden="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:GoToStateAction StateName="SelectionClosedState"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Border x:Name="UserMessage" Background="#BF000000" Visibility="{Binding UserMessenger.IsShowingMessage, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" Grid.ColumnSpan="2">
<Border VerticalAlignment="Center" Style="{DynamicResource UserMessageStyle}" Background="#FFE2E2E2" BorderBrush="{x:Null}" BorderThickness="0" MaxWidth="800" HorizontalAlignment="Center" MinWidth="400">
<Border.Effect>
<DropShadowEffect Opacity="0.5" ShadowDepth="10"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap" Text="{Binding UserMessenger.MessageText, Mode=OneWay}" Margin="0,0,0,10" HorizontalAlignment="Center" MinHeight="58" Style="{DynamicResource TextBlockBase}"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Border x:Name="OKAction" Style="{DynamicResource ButtonBorderStyle}" Margin="15,0,0,0" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="{Binding UserMessenger.ShowOkButton, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Border.Effect>
<DropShadowEffect Opacity="0.33"/>
</Border.Effect>
<Button Template="{DynamicResource FlatButtonTemplate}" Command="{Binding UserMessenger.CloseCommand, Mode=OneWay}" Margin="0">
<Button.CommandParameter>
<system:String>OK</system:String>
</Button.CommandParameter>
<Image Height="44" Source="Skins/Images/OK.png"/>
</Button>
</Border>
<Border x:Name="CancelAction" Style="{DynamicResource ButtonBorderStyle}" Margin="15,0,0,0" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="{Binding UserMessenger.ShowCancelButton, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}">
<Border.Effect>
<DropShadowEffect Opacity="0.33"/>
</Border.Effect>
<Button Template="{DynamicResource FlatButtonTemplate}" Command="{Binding UserMessenger.CloseCommand, Mode=OneWay}" Margin="0">
<Button.CommandParameter>Cancel</Button.CommandParameter>
<Image Height="44" Source="Skins/Images/Cancel.png"/>
</Button>
</Border>
</StackPanel>
</Grid>
</Border>
</Border>
</Grid>
</UserControl>
You need to mark the blend design time namespace as Ignorable or switching between blend and visual studio will not work.
See Getting an error switching back and forth between Blend and VS
Make sure the following is in your XAML namespace declarations
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Please tell me any one How can i change the scroll bar color in windows phone 7 and also i want to customize the scroll bar in windows phone 7.
Have you tried using the "background property in your xaml code where the scroll bar lies?
try this:
<ScrollBar Background="Green" HorizontalAlignment="Left" Margin="299,144,0,0" VerticalAlignment="Top"/>
don't use this whole thing what i want you to take from it is you should have a line of xaml code similar to this just enter the background property as i did. hope this is more clear.
If you are happy with coding it into XAML, find your answer here. Or else the shortest and the easiest way is to use Expression Blend.
Also a snippet I found elsewhere:
<ListBox x:Name="myListBox">
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" Background="Blue" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
<ScrollBar x:Name="HorizontalScrollBar" Background="Blue" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
Hope all this helps you :)
I'm trying to create a to do list in Windows 8 XAML. when I complete an item, I want a storyboard to erase the completed items. How can I get a storyboard to run on items inside a datatemplate? when I run the storyboard from C#, I get an error that says: WinRT information: Cannot resolve TargetName rectangleToDelete.
My storyboard looks like this:
<Page.Resources>
<Storyboard x:Name="AnimateDelete">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangleToDelete">
<EasingDoubleKeyFrame KeyTime="0" Value="-0.333"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-327.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangleToDelete">
<EasingDoubleKeyFrame KeyTime="0" Value="0.333"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-163.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
My Listview template looks like this:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal"
Margin="0,0,-393,-15">
<CheckBox x:Name="CheckBoxComplete"
IsChecked="{Binding Complete, Mode=TwoWay}"
Checked="CheckBoxComplete_Checked"
Content="{Binding Text}"
Margin="10,5"
VerticalAlignment="Center"
MinWidth="300" />
<Button x:Name="ButtonDelete"
Click="ButtonDelete_Click"
Content="Delete" />
</StackPanel>
<Rectangle x:Name="rectangle"
Fill="#FFF4F4F5"
Stroke="Black"
StrokeThickness="0"
RenderTransformOrigin="0.5,0.5"
Margin="319,2,-300,-14"
Height="34"
VerticalAlignment="Top">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="-1" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
My codebehind looks like this:
Button btn = (Button)sender;
TodoItem item = btn.DataContext as TodoItem;
StackPanel stk = (StackPanel)btn.Parent;
Grid grd = (Grid)stk.Parent;
Rectangle rect = (Rectangle)grd.Children[1];
rect.Name = "rectangleToDelete";
AnimateDelete.Begin();
as you can see, I've tried finding the rectangle and giving it the correct name, but I get the same error.
any help would be appreciated!
thanks, tom
A DataTemplate has a different namescope than anything outside. You can put the contents of that DataTemplate and the Storyboard in their own UserControl to get it to work.