This property driving me nuts , i have a button in my wpf form,what am trying to achieve here is
When i click button, disable the main window and pop up the message box.
this the code behind
private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (sender is Button)
{
Application.Current.Dispatcher.Invoke(new Action(() =>
{
Application.Current.MainWindow.IsEnabled = false;
MessageBox.Show(Application.Current.MainWindow, "test");
}));
}
}
Initialize my main window
protected override void InitializeShell()
{
base.InitializeShell();
Application.Current.MainWindow = (Shell)this.Shell;
Application.Current.MainWindow.Show();
}
It throws exception "'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[1].(2)'."at "Application.Current.MainWindow.IsEnabled = false;" .
Here is the stack trace of few lines
at System.Windows.Media.Animation.Storyboard.VerifyPathIsAnimatable(PropertyPath path)
at System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive(Clock currentClock, DependencyObject containingObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary clockMappings, Int64 layer)
If i bypass then it display message box but am wondering why it throw exception at isEnable=false ?
Any help much appreciated.
Thanks in Advance
My shell.xaml
<Window x:Class="Webster.Client.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:Webster.Client"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
xmlns:Controls="clr-namespace:Webster.Client.Controls"
xmlns:inf="clr-namespace:Webster.Client.Infrastructure;assembly=Webster.Client.Infrastructure"
Title="Webster - News Segmentation and Encoding" WindowStartupLocation="CenterScreen" WindowState="Normal"
Icon="/Webster.Client;component/Resources/film_clip64.png" SizeToContent="Manual" HorizontalAlignment="Center"
MinWidth="390" Loaded="Window_Loaded">
<!-- window -->
<Window.Background>
<ImageBrush ImageSource="Resources/background.png" Stretch="Fill"/>
</Window.Background>
<Window.Resources>
<DataTemplate DataType="{x:Type inf:ExtendedHeader}">
<StackPanel Orientation="Horizontal" ToolTip="{Binding Path=ToolTip}">
<Image Source="{Binding Path=IconUri}" Width="16" Height="16" />
<TextBlock Text="{Binding Path=Title}" />
</StackPanel>
</DataTemplate>
<Storyboard x:Key="InTransition">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-72"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-157"/>
<SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:01.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Logo" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-50"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-101"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:02.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainToolbar" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0" KeySpline="0,0.495999991893768,0.504000008106232,1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource InTransition}"/>
</EventTrigger>
</Window.Triggers>
<!-- content grid -->
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" >
<Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
<RowDefinition Height="25"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="627*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- logo -->
<Canvas x:Name="Logo" Grid.ColumnSpan="3" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<TextBlock
Text=""
TextAlignment="Center"
TextWrapping="NoWrap"
Foreground="#FFC4CFD6"
FontSize="50"
Opacity="0.85"
Canvas.Left="9"
Canvas.Top="6"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="60"
Width="{Binding ElementName=Logo,Path=ActualWidth}"
FontWeight="Bold" />
</Canvas>
<!-- main bar -->
<ItemsControl x:Name="MainToolbar" cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainToolBarRegion}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,0,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.Column="1">
<ItemsControl.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="10, 0, 10, 10">
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!-- content -->
<Grid x:Name="ContentGrid" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Controls:AnimatedTabControlWebster
x:Name="StoryTab"
SelectedIndex="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ShellTabItemStyle}"
Background="{StaticResource headerBarBG}"
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainRegion}"
AutomationProperties.AutomationId="PositionSummaryTab" IsEnabled="True">
</Controls:AnimatedTabControlWebster>
</Grid>
<!-- footer -->
<StackPanel
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Horizontal"
FlowDirection="RightToLeft"
Margin="0 0 10 0"
>
<Button Name="btnExit" Click="btnExit_Click">Exit</Button>
</StackPanel>
<StackPanel
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"
Orientation="Horizontal"
>
<ItemsControl
cal:RegionManager.RegionName="{x:Static inf:RegionNames.MainFooterRegion}"
/>
</StackPanel>
</Grid>
</Grid>
Related
<Style x:Key="CSButton" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Resources>
<Storyboard x:Key="CSImageAnimation">
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="image">
<EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.3" Value="0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.6" Value="0.5,0.5"/>
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border
CornerRadius="2" Opacity="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFE27F" Offset="0"/>
<GradientStop Color="#FFFFC500" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock x:Name="CSLabel" HorizontalAlignment="Center" Margin="0,20,0,20"
VerticalAlignment="Top"
Text="Current Session" FontSize="20"
Foreground="#FF303030"/>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="bttnPreviousSession" Height="30" Width="30"
Style="{StaticResource LeftInsideButton}" Command="{Binding UpdateSessionCommand}" />
<Image x:Name="image" Margin="0,0,0,0"
Source="/Overseer;component/Resources/CurrentSession.png"
Height="120">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Button x:Name="bttnNextSession" Height="30" Width="30" Style="{StaticResource RightInsideButton}"/>
</StackPanel>
<TextBlock x:Name="CSYLabel" HorizontalAlignment="Center" Margin="0,5,0,0"
VerticalAlignment="Top"
Text="{Binding SessionUsed}" FontSize="18"
Foreground="#FF303030"/>
</StackPanel>
<StackPanel Grid.Column="0" Grid.Row="1" Margin="10,0,10,10"
HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Rectangle Fill="#FFFFF300"
Height="1" Width="220" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,10,0,0"/>
<TextBlock x:Name="ContentLabel" HorizontalAlignment="Center"
Text="1980" FontFamily="Segoe UI" VerticalAlignment="Center"
FontSize="25" Foreground="White"/>
<TextBlock x:Name="RLabel" HorizontalAlignment="Center"
Text="Strength" FontSize="24" VerticalAlignment="Center"
Foreground="#FF303030"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource CSImageAnimation}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to click the bttnPreviousSession button which is inside the CSButton Style. I have passed the command but its not working. Clicking it fires the command on main button. I know how to do this with code behind, but want to do this with MVVM pattern, either through view or viewmodel.
I created a simple notification window with animation and some message. But, can I disable animation or storyboard on eg. MouseEnter event, like a Facebook notification. Gradually reduced the opacity, and when I drag the Mouse on the window, then set opacity to 100%. How to do?
Here is a xaml code:
WindowStyle="None" AllowsTransparency="True" Background="Transparent" >
<Grid x:Name="gridData" RenderTransformOrigin="0,1" MouseRightButtonDown="Window_MouseRightButtonDown" MouseEnter="Grid_MouseEnter">
<Border BorderThickness="1" Background="SkyBlue" BorderBrush="Black" CornerRadius="10">
<StackPanel Margin="20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtTitle" Grid.Row="0" Grid.Column="0" Text="" FontWeight="Bold" VerticalAlignment="Center"/>
<Image x:Name="image" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Visibility="Collapsed"/>
<TextBlock x:Name="txtMessage" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="" TextWrapping="Wrap"/>
</Grid>
</StackPanel>
</Border>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" >
<BeginStoryboard >
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid.RenderTransform>
<ScaleTransform ScaleY="1" />
</Grid.RenderTransform>
</Grid>
Add a name to your BeginStoryboard:
<BeginStoryboard Name="ScaleAndFadeOut">
then add another event trigger for a different event, and use a StopStoryboard element:
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
...
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.MouseMove">
<StopStoryboard BeginStoryboardName="ScaleAndFadeOut" />
</EventTrigger>
</Grid.Triggers>
MSDN: "How to: Use Event Triggers to Control a Storyboard After It Starts"
I have a layout as below:
Grid x:Name="layoutRoot"
|--ListBox
|--Grid x:Name="detailsBaloon"
Initially my detailsBaloon's properties:
ScaleX = 0 and ScaleY = 0
so that it is not visible.
Now when user selects any item of the listBox, I want childGrid to become visible with some animation in which I set ScaleX and ScaleY to 1. It works perfectly. Now when user selects another item, I mean selection changes in the ListBox, then I want the same animation to show. But this time animation does not occur at all.
Here is my code :
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SwatchColorsDataSource}}">
<Grid.Resources>
<Storyboard x:Key="detailsBaloonVisibilityAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="detailsBaloon">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="detailsBaloon">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<ListBox x:Name="SwatchListBox" ItemTemplate="{DynamicResource SwatchTemplate}" ItemsSource="{Binding XPath=/Swatches/Swatch}" ItemContainerStyle="{DynamicResource Colors_ListBoxStyle}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">
<ListBox.Triggers>
<EventTrigger RoutedEvent="ListBox.SelectionChanged">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource ResourceKey=detailsBaloonVisibilityAnimation}" />
</EventTrigger.Actions>
</EventTrigger>
</ListBox.Triggers>
<ListBox.Background>
<RadialGradientBrush>
<GradientStop Color="#FF5B5959" Offset="0"/>
<GradientStop Color="#FF242222" Offset="1"/>
</RadialGradientBrush>
</ListBox.Background>
</ListBox>
<Grid x:Name="detailsBaloon" HorizontalAlignment="Left" Height="230" Margin="78.8,26.4,0,0" VerticalAlignment="Top" Width="280" DataContext="{Binding SelectedItem, ElementName=SwatchListBox}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Path Data="M0.5,4.5 C0.5,2.290861 2.290861,0.5 4.5,0.5 L259.5,0.5 C261.70914,0.5 263.5,2.290861 263.5,4.5 L263.79983,194.9999 C321.40044,282.59975 344.6003,286.99993 251.79984,214.19991 L4.5,213.5 C2.290861,213.5 0.5,211.70914 0.5,209.5 z" Fill="#FF2E2727" Margin="7,9,-41.778,-44.576" Stretch="Fill" Stroke="Black"/>
<TextBlock Height="30" Margin="14.6,22,15.4,0" TextWrapping="Wrap" Text="{Binding XPath=Theme}" VerticalAlignment="Top" Width="250" Foreground="White" FontSize="21.333"/>
<Rectangle Fill="{Binding XPath=Color1}" HorizontalAlignment="Left" Margin="18.6,68.6,0,76.4" RadiusY="4" RadiusX="4" Stroke="Black" Width="70" Height="85"/>
<Rectangle Fill="{Binding XPath=Color2}" Margin="102.6,68.6,107.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black"/>
<Rectangle Fill="{Binding XPath=Color3}" Margin="0,68.6,23.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black" HorizontalAlignment="Right" Width="70"/>
<TextBlock HorizontalAlignment="Left" Height="19.8" Margin="24.6,0,0,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color1}" VerticalAlignment="Bottom" Width="70" Foreground="White"/>
<TextBlock Height="19.8" Margin="109.6,0,100.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color2}" VerticalAlignment="Bottom" Foreground="White"/>
<TextBlock Height="19.8" Margin="0,0,15.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color3}" VerticalAlignment="Bottom" Foreground="White" HorizontalAlignment="Right" Width="70"/>
</Grid>
</Grid>
In your animation From and To needs to specify as you havent define from value in animation evrytime and thats why animation is not upadted on every selection. here Animation considering From=To=1.
Your animation approach works as below
I have added extra DoubleAnimationUsingKeyFrames to define From="0" at keytime 0 so that grid scale on every selection
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<Storyboard x:Key="detailsBaloonVisibilityAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<ListBox x:Name="SwatchListBox" Background="Gray">
<ListBox.Triggers>
<EventTrigger SourceName="SwatchListBox" RoutedEvent="Selector.SelectionChanged">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource detailsBaloonVisibilityAnimation}"/>
</EventTrigger.Actions>
</EventTrigger>
</ListBox.Triggers>
<ListBoxItem>1</ListBoxItem>
<ListBoxItem>2</ListBoxItem>
<ListBoxItem>3</ListBoxItem>
</ListBox>
<Grid x:Name="detailsBaloon" Background="Red" HorizontalAlignment="Right" Height="230" VerticalAlignment="Top" Width="280" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="scale" ScaleX="0" ScaleY="0"/>
</Grid.RenderTransform>
</Grid>
</Grid>
I'm a beginner in development for Windows Phone 8. I've installed Telerik trial kit for Windows Phone in my VS 2012.
To do:
What I wanted to do is to show a list of items whose each item can get expanded to show another list of items when a user clicks on the former list's items.
What I did:
I've used a RadDataBoundListBox and a RadExpanderControl. The XAML code for which is attached in file - "MainPage.XAML". Since I've used my own ViewModels, I used a sample data file called "SampleData1.XAML", so that I can see its look in the designer tab of my VS 2012. It looks perfect in the designer tab as I toggle between the values (true or false) of IsExpanded property of the RadExpanderControl.
The problem:
When I run the application, the outer RadDataBoundListBox (named myListBox) gets its contents neatly and displays correctly. But when I click on any one of its items (i.e. myListBox items), the inner RadDataBoundListBox (named subCategoryListBox) gets its contents correctly but comes behind the myListBox which causes overlapping of both listbox's items.
What it should do:
On the click of any myListBox item, the subCategoryListBox should open in the space made available after lowering down the other myListBox items.
P.S: The items in both RadDataBoundListBox (i.e myListBox and subCategoryListBox) are loaded programmatically.
MainPage.XAML is:
<phone:Panorama Title="oscommerce">
<phone:Panorama.Background>
<ImageBrush ImageSource="/OSCommerce;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem Name="firstPanoramaItem" Header="Categories" Loaded="categories_Loaded">
<phone:PanoramaItem.Resources>
<helpers:StringToUpperConverter x:Key="StringToUpperConverter"/>
<ControlTemplate TargetType="telerikPrimitives:RadExpanderControl" x:Key="CustomAnimatedIndicatorExpanderTemplate">
<Border
HorizontalAlignment="Left"
VerticalAlignment="Top"
x:Name="PART_LayoutRoot"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Margin="0,0,0,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandedStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Collapsed" To="Expanded">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="180">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
x:Name="PART_ExpandAnimation"
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="{Binding ElementName=PART_ExpandableContentPresenter, Path=DesiredSize.Height}"> <!--my addition-->
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="1">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
<VisualTransition From="Expanded" To="Collapsed">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="-100">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="0"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="0"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="-100"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation
Duration="0:0:0.250"
Storyboard.TargetName="AnimatedIndicatorRotate"
Storyboard.TargetProperty="Angle"
To="180">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Height"
To="{Binding ElementName=PART_ExpandableContentPresenter, Path=DesiredSize.Height}"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentHolder"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="PART_ExpandableContentTranslate"
Storyboard.TargetProperty="Y"
To="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Height="300">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="PART_ExpanderHeaderLayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentPresenter
x:Name="PART_MainContentPresenter"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" Margin="0,0,0,0"
/>
<ContentPresenter
Grid.Column="1"
Content="{TemplateBinding AnimatedIndicatorContent}"
ContentTemplate="{TemplateBinding AnimatedIndicatorContentTemplate}"
x:Name="PART_AnimatedIndicator"
RenderTransformOrigin="0.5, 0.47" Margin="0,0,0,0">
<ContentPresenter.RenderTransform>
<RotateTransform x:Name="AnimatedIndicatorRotate"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<Canvas
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
x:Name="PART_ExpandableContentHolder"
Height="Auto"
Width="396"
Background="{TemplateBinding Background}">
<ContentPresenter
Visibility="Collapsed"
x:Name="PART_ExpandableContentPresenter"
ContentTemplate="{TemplateBinding ExpandableContentTemplate}"
Content="{TemplateBinding ExpandableContent}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="PART_ExpandableContentTranslate"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Canvas>
</Grid>
</Border>
</ControlTemplate>
</phone:PanoramaItem.Resources>
<telerikPrimitives:RadDataBoundListBox Name="myListBox" ItemsSource="{Binding Items}" Margin="12,3,12,0" SelectionChanged="myListBox_Tap">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<telerikPrimitives:RadExpanderControl ExpandableContent="{Binding}" Content="{Binding}" BorderThickness="0, 3, 0, 0" BorderBrush="{StaticResource PhoneSubtleBrush}" Template="{StaticResource CustomAnimatedIndicatorExpanderTemplate}" Height="Auto">
<telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
<DataTemplate>
<Image Margin="0,6,0,15" Source="Images/ExpanderArrow.png" Width="55"/>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
<telerikPrimitives:RadExpanderControl.ContentTemplate>
<DataTemplate>
<Grid Height="100" Width="Auto" Margin="0,0,0,0">
<StackPanel Orientation="Horizontal">
<Canvas Height="80" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Background="PaleGreen">
<Image Height="60" Width="60" Canvas.Left="10" Canvas.Top="10" Source="{Binding Image}" Stretch="UniformToFill"/>
</Canvas>
<StackPanel>
<TextBlock Margin="20,12,0,0" Text="{Binding Title, Converter={StaticResource StringToUpperConverter}}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="Segoe WP" FontWeight="Bold" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="34"/>
<TextBlock Margin="20,0,0,0" Text="{Binding DateAdded}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="Segoe WP" FontWeight="Normal" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="42"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ContentTemplate>
<telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
<DataTemplate>
<Grid Margin="40,0,0,0" Height="Auto">
<telerikPrimitives:RadDataBoundListBox Name="subCategoryListBox" ItemsSource="{Binding SubItems}" IsHitTestVisible="False">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Orientation="Horizontal" Height="100">
<Canvas Height="80" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,12,0,0" Background="PaleGreen">
<Image Height="60" Width="60" Canvas.Left="10" Canvas.Top="10" Source="{Binding Image}" Stretch="UniformToFill"/>
</Canvas>
<StackPanel>
<TextBlock Margin="20,12,0,0" Text="{Binding Title, Converter={StaticResource StringToUpperConverter}}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="Segoe WP" FontWeight="Bold" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="34"/>
<TextBlock Margin="20,0,0,0" Text="{Binding DateAdded}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="Segoe WP" FontWeight="Normal" Foreground="{StaticResource PhoneForegroundBrush}" Width="224" Height="42"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
</Grid>
</DataTemplate>
</telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
</telerikPrimitives:RadExpanderControl>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>
</phone:PanoramaItem>
</phone:Panorama>
I've got the solution now and its pretty simple. Add a ListBox inside the ItemTemplate of another ListBox like this... (You can copy/paste the code below in your XAML.)
<ListBox x:Name="myListBox" Margin="0,-28,-22,0" ItemsSource="{Binding Items}" SelectionChanged="myListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="Auto" VerticalAlignment="Bottom" Margin="0,0,0,0">
<Border Height="3" Background="White" Margin="0,0,0,5"/>
<StackPanel Orientation="Horizontal" Margin="12,0,0,10" Height="100">
<Canvas Width="100" Height="100" Background="#FFFFC702">
<Image Width="80" Height="80" Source="{Binding Image}" Stretch="UniformToFill" Canvas.Top="10" Canvas.Left="10"/>
</Canvas>
<StackPanel Width="309" Margin="8,0,0,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding DateAdded}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
<ListBox Name="innerListBox" Width="367" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="60,0,0,0" Height="Auto" ItemsSource="{Binding SubItems}" Visibility="Collapsed" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="innerListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="100" Margin="0,0,0,10" VerticalAlignment="Bottom">
<Canvas Width="100" Height="100" Background="#FFFFC702">
<Image Width="80" Height="80" Source="{Binding Image}" Stretch="UniformToFill" Canvas.Top="10" Canvas.Left="10"/>
</Canvas>
<StackPanel Width="260" Margin="8,-7,0,0">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="{Binding DateAdded}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now to access the innerListBox (present inside myListBox), use the following C# code.
var _container = myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.SelectedItem);
var _children = AllChildren(_container);
ListBox _control = (ListBox)_children.Find(x => x.Name.Equals("innerListBox"));
The definition of AllChildren() method is below which you have to also add in C# code:
private List<Control> AllChildren(DependencyObject parent)
{
List<Control> _List = new List<Control>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var _child = VisualTreeHelper.GetChild(parent, i);
if (_child is Control)
_List.Add(_child as Control);
_List.AddRange(AllChildren(_child));
}
return _List;
}
I created an animation in xaml, and I'd like the second part to be played in a new window. I certainly could open a new one after the login animation completes and play it, but I was wondering if I could stay in the same window, but use a different xaml file.
<Window x:Class="TestWpfAnimation1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="1000"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1"
Grid.ColumnSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<StackPanel x:Name="StackPanelName"
Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<StackPanel.RenderTransform>
<TranslateTransform X="0" />
</StackPanel.RenderTransform>
<Label Content="_Name:"
Target="{Binding ElementName=TextBoxName}" />
<TextBox Height="19"
Width="110"
Margin="18.55,0,0,0" />
</StackPanel>
<StackPanel x:Name="StackPanelPassword"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel.RenderTransform>
<TranslateTransform />
</StackPanel.RenderTransform>
<Label Content="_Password:" />
<PasswordBox Height="19"
Width="110" />
</StackPanel>
<Button
Content="Log in"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Width="60"
IsDefault="True"
Margin="0,13,0,0"
Grid.Row="1"
Grid.ColumnSpan="2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelName"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="-381" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelName"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelPassword"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="381" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelPassword"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:0.5"
Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageProfilePicture"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:1.5"
Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2"
Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StackPanelNameTitle"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0:0:2"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle x:Name="ImageProfilePicture"
Fill="Black"
Height="50"
Width="50"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Opacity="0"/>
<StackPanel x:Name="StackPanelNameTitle"
VerticalAlignment="Center"
Opacity="0">
<TextBlock Text="First Last name"
Margin="8,0,0,0"
FontSize="13"
FontWeight="SemiBold"/>
<TextBlock Text="Student"
HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>