Hi I want to make this expander align veritically rather than horizontaly with the arrow facing vertically aswell atm it looks like this:
Open:
Closed:
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" Duration="0:0:0.25" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander x:Name="expander" Header="Expander" Expanded="expander_Expanded">
<ListBox x:Name="listBox">
<ListBoxItem Content="ListBoxItem" />
<ListBoxItem Content="ListBoxItem" />
<ListBoxItem Content="ListBoxItem" />
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="0"/>
</ListBox.LayoutTransform>
</ListBox>
</Expander>
</StackPanel>
Change the ExpandDirection.
Related
I have a tabControl that Contain several TabHeaders,I made it so that the text size of the TabHeader will shrink a little when mouse is over and will become bigger when the TabHeader is selected. I want to add an image into the TabHeader that will act the same way and to act as one item with the text so that both the text and the image will shrink a little when mouse is over and get bigger when TabHeader is selected. Right now both do that but separately meaning that they animate when I hover or click either of them and I want them to act as one
here is the xaml of the TabHeader
<TabItem.Header>
<StackPanel>
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="SalesImg" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/Sales.png">
<Image.RenderTransform>
<ScaleTransform x:Name="scale" CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1.5" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<TextBlock Grid.Column="1" Text="Sales" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
</TabItem.Header>
You can put the container of the image and text - in this case, a grid - into a ViewBox, and animate on the ViewBox.
ViewBox takes the all the contents inside it as a single child, so both image and text will grow and shrink in size as a whole.
<TabItem.Header>
<Grid Width="126" Height="48">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1.5" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Viewbox Width="84" Height="32">
<Viewbox.RenderTransform>
<ScaleTransform x:Name="scale" CenterX="42" CenterY="16" ScaleX="1" ScaleY="1" />
</Viewbox.RenderTransform>
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="SalesImg" HorizontalAlignment="Center" VerticalAlignment="Center"
Source="Images/Sales.png"/>
<TextBlock Grid.Column="1" Text="Sales" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Viewbox>
</Grid>
</TabItem.Header>
Whay I give that error "'ScaleTransform' name cannot be found in the name scope of 'System.Windows.Controls.ListView'." when ScaleTransform in another trigger, but whe I set it in Image.Triggers it work fine?
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Triggers>
<EventTrigger RoutedEvent="ListView.SelectionChanged">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListView.Triggers>
</ListView>
and I try that but also not working:
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Triggers>
<EventTrigger RoutedEvent="ListView.SelectionChanged">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.Target="{Binding MyAnimatedScaleTransform}" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.Target="{Binding MyAnimatedScaleTransform}" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ListView.Triggers>
</ListView>
I find that controllers in DataTemplate cannot be accessed, so i change my cod Xaml to:
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Name}"/>
<Image x:Name="Img" Source="{Binding Source}" Height="128" Width="128" Focusable="True">
<Image.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" CenterX="25" CenterY="25" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard Name="myBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.25" AutoReverse="True" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.25" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
Now I have been returned to my main problem, when I click second time on image before first animation be ended (Reverse), the image don't revert to original size.
i was searching for combining multiple transform in an object and i found out how but the problem is when i try to put transformgroup, it gives an error "Cannot resolve all property references in the property path 'RenderTransform.ScaleX'. Verify that applicable objects support the properties."
here's my transformation code which i copied from the net ("thanks to those who made this code")
<Window.Resources>
<Storyboard x:Key="expandStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.3" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.3" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="shrinkStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="shakeStoryBoard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
From="-5" To="5" Duration="0:0:0.05"
AutoReverse="True"
RepeatBehavior="3x"
FillBehavior="Stop" />
</Storyboard>
and this is my object (button)
<Button RenderTransformOrigin="0.5,0.5" Background="Transparent" Focusable="False" BorderBrush="Transparent" Height="220" HorizontalAlignment="Left" Margin="591,213,0,0" Name="cmdsettings" VerticalAlignment="Top" Width="189">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Width="217" Height="220">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/settings.png" Height="192" Width="204" />
<TextBlock VerticalAlignment="center" TextAlignment="center" FontSize="16" Width="123" Foreground="white" FontWeight="Bold" Height="20">Settings</TextBlock>
</StackPanel>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource shakeStoryBoard}" />
</EventTrigger>
</Button.Triggers>
<Button.RenderTransform >
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<RotateTransform />
</TransformGroup>
</Button.RenderTransform>
</Button>
Since Button.RenderTransform contains a TransformGroup, you would have to access the contained Transforms by its Children property:
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" ... />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" ... />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].Angle" ... />
For some reason when I set two expanders beside one another, the first expander seems to be behind the second one and wont expand out the expander set beside it? Is there a way I can fix this in the code below?
<Grid>
<StackPanel Orientation="Horizontal" Margin="0,0,195,0">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander x:Name="expander" Expanded="expander_Expanded" ExpandDirection="Right" Width="29">
<ListBox x:Name="listBox">
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="1"/>
</ListBox.LayoutTransform>
</ListBox>
</Expander>
<StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox1" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander ExpandDirection="Right" Name="expander1" Width="29">
<ListBox Name="listBox1">
<ListBox.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="1" />
</ListBox.LayoutTransform>
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
<ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
</ListBox>
</Expander>
</StackPanel>
</StackPanel>
</Grid>
Remove Width="29" in
<Expander x:Name="expander"
Expanded="expander_Expanded"
ExpandDirection="Right"
Width="29">
and all will be okay.
I have a simple button (3 of them - all same except the content binding which is just an integer.
<Button Width="24" Height="24" Style="{StaticResource CircleButton}"
Background="#CC2B2B" Foreground="#FFFFFF"
Content="{Binding PinnedItemsCount,
FallbackValue=0,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged,
NotifyOnTargetUpdated=True}"
Name="ui_btnPinnedCount" />
How do I make the button boune when the data changes?
The underlying content implements INotifyPropertyChanged and the data bindings are all working, just need the button to bounce 3 times once the data changes....
Thanks!
Use animations with a DataTrigger
http://msdn.microsoft.com/en-us/library/system.windows.media.animation.bounceease.aspx
How to: Trigger an Animation When Data Changes
<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation From="30" To="200" Duration="00:00:3"
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="2" EasingMode="EaseOut"
Bounciness="2" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
This makes it fade in and out, replace with any sotryboard animation I imagine.
<Button Width="24" Height="24" Style="{StaticResource CircleButton}" Background="#CC2B2B" Foreground="#FFFFFF"
Content="{Binding PinnedCount, FallbackValue=0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnTargetUpdated=True}"
Name="ui_btnPinnedCount">
<Button.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard AutoReverse="True">
<DoubleAnimation Storyboard.TargetName="ui_btnPinnedCount" Storyboard.TargetProperty="Opacity" To=".1" Duration="0:0:.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>