Enkel templates, animering og slikt i WPF


Forum --> .NET

Author Comment
Lars Thomas Bredland
Enkel templates, animering og slikt i WPF 14.09.2011 15:52:34

<!--
    Background: Project is a MVVM project and this UserControl is supposed to show a stack of buttons to handle different message types.
    It binds to a ViewModel containing public properties describing if there are messages and how many.
    E.g. public bool HasErrors and public int NumberOfErrors (with the normal backing and property changed pattern)
    
    My newb questions:
    * How do I build the templates etc? I have done some work on it (below), but are not "done"
    * How can I get the animations to ease the buttons in and out (now it abruptly puts them in there and then runs the animation)
    * How can I "transfer" the colors for the background from the "main" definition of the buttons down into the templates
    
    Points I need help with are marked in comments with the word HELP: in front.
    -->
<UserControl x:Class="MyMVVM.View.UserControl.StackView"
             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"
             designHeight="80"
             designWidth="150"
             mc:Ignorable="d">
    
    <UserControl.Resources>
        <!-- Convert HasXXsMessages into Visibility for hiding controls when no messages are found -->
        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>

        <!-- Button styles to stack  -->
        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Style="{DynamicResource VerticalGrow}" >
                            <Grid.Background>
                                <LinearGradientBrush Opacity="1" StartPoint="0,0.5" EndPoint="1,0.5">
                                    <GradientStop Offset="0" Color="White" />
                                    <!-- 
                                    HELP: I need to get the value red from main def (below) so I can have Red, Orange and Green for OK, Warning and Error 
                                    -->
                                    <GradientStop Offset="0.52" Color="Red" />
                                </LinearGradientBrush>
                            </Grid.Background>
                            <!-- Content of button, A label describing message type and number of that type -->
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="2*" />
                                    <ColumnDefinition Width="1*" />
                                </Grid.ColumnDefinitions>
                                <!-- 
                                HELP: Get OK and the NumberOfOKs from the main definition (below)
                                -->
                                <Label Grid.Column="0" Content="OK"/>
                                <Label Grid.Column="1" Content="{Binding Path=NumberOfOKs, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}"/>
                            </Grid>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <!-- 
        Style to make buttons ease into view
        * Needs to be fixed so it animates from bottom not top (or from the middel of itself)
        -->
        <Style x:Key="VerticalGrow" TargetType="Grid">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <!-- 
                Animate entry
                HELP: This seems to show the whole control first and then animate it
                -->
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation BeginTime="0:0:0.5"
                                                     Duration="0:0:0.5"
                                                     From="0"
                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                     To="1">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase EasingMode="EaseInOut" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
                <!-- 
                Animate exit, reverse of the other, 
                HELP: does not seem to run (or visibility is set before animation(?)
                -->
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Visibility" Value="Collapsed" />
                        <Condition Property="Visibility" Value="Hidden" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation BeginTime="0:0:0.5"
                                                     Duration="0:0:0.5"
                                                     From="1"
                                                     Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                     To="0">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase EasingMode="EaseInOut" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiTrigger.EnterActions>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <!-- 
    Usercontrol with buttons representing a type of message (OK, Warnings and Errors) 
    and binding to ICommand that knows what  to do in each case
    -->
    <DockPanel>
        <!-- 
        Button to handle OK messages
        -->
        <Button DockPanel.Dock="Bottom" Style="{DynamicResource ButtonStyle}" 
            Visibility="{Binding Path=HasOKs, Converter={StaticResource BoolToVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}"
            VerticalAlignment="Bottom" Command="{Binding Path=HandleOKsCommand}">
            <!--
            HELP: 
                "OK"                        - set this to replace OK in the content
                {Binding Path=NumberOfOKs}  - set this to replace 0 in the content
                Green                       - set Green as the bgcolor in the contents LinearGradient?
            
                Pluss make them animate in and out correctly when Visibility changes
            -->
        </Button>

        <Button DockPanel.Dock="Bottom" Style="{DynamicResource ButtonStyle}" 
            Visibility="{Binding Path=HasWarnings, Converter={StaticResource BoolToVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}"
            VerticalAlignment="Bottom" Command="{Binding Path=HandleWarningsCommand}">
            <!-- HELP: same as above -->
        </Button>

        <Button DockPanel.Dock="Bottom" Style="{DynamicResource ButtonStyle}" 
            Visibility="{Binding Path=HasErrors, Converter={StaticResource BoolToVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}"
            VerticalAlignment="Bottom" Command="{Binding Path=HandleErrorsCommand}">
            <!-- HELP: same as above -->
        </Button>
    </DockPanel>
</UserControl>
Lars Thomas Bredland
RE:Enkel templates, animering og slikt i WPF 26.09.2011 09:38:50
Dårlig med respons her gitt Smiley

En løsning:
Hvis jeg setter høyden til 0 og animerer til en gitt høyde, så virker det forsåvidt. Hvis jeg vil bruke Auto-høyden, kan jeg sette av en skjult knapp og binde til høyden på den.

Copyright (C) 2006 Norwegian .NET User Group
  Powered by EPiServer