Geek asks and answers

XAML - simple animation for easy user control

I am working on a Windows Store App with C # and have come across something where I cannot imagine that it is difficult, but I cannot figure out how to do this.

On mine, MainPage.xamlI created a custom control: A StackPanelwith a horizontal orientation, only inside Imageand TextBlockinside. Like this:

<!-- language: lang-xml -->
<StackPanel Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped">
    <Image Source="/Assets/pic.jpg" Margin="20"/>
    <TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center">
        Lorem Ipsum
    </TextBlock>
</StackPanel>

What looks like this:

enter image description here

, . , . , ListItem SplitView: , , . / , ListItems (Common. StandardStyles.xaml Standard130ItemTemplate). (), : PointerDownThemeAnimation PointerUpThemeAnimation. , , . , , ( #) , HTML/Javascript. , .

Storyboard , , .

XAML :

<!-- language: lang-xml -->
<StackPanel x:Name="LoremIpsum" Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped" PointerPressed="LoremIpsum_AnimDown" PointerReleased="LoremIpsum_AnimUp" PointerExited="LoremIpsum_AnimUp">
    <Image Source="/Assets/pic.jpg" Margin="20"/>
    <TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center">
        Lorem Ipsum
    </TextBlock>
    <StackPanel.Resources>
        <Storyboard x:Name="pointerDownStoryboard">
            <PointerDownThemeAnimation TargetName="LoremIpsum" />
        </Storyboard>
        <Storyboard x:Name="pointerUpStoryboard">
            <PointerUpThemeAnimation TargetName="LoremIpsum" />
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

:

<!-- language: lang-cs -->
private void Latest_AnimDown(object sender, PointerRoutedEventArgs e)
{
    pointerDownStoryboard.Begin();
}
private void Latest_AnimUp(object sender, PointerRoutedEventArgs e)
{
    pointerUpStoryboard.Begin();
}

. ... , , , . , Standard130ItemTemplate . . , MyStackPanel, , StackPanel + Storyboard s, x: Name , , , LayoutAwarePage, .

, , , : XAML.

Generic.xml:

<!-- language: lang-xml -->
xmlns:local="using:UserAndCustomControls">
<Style TargetType="local:BasicCustomControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:BasicCustomControl">
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

, :

<!-- language: lang-cs -->
namespace UserAndCustomControls
{
    public sealed class BasicCustomControl : Control
    {
        public BasicCustomControl()
        {
            this.DefaultStyleKey = typeof(BasicCustomControl);
        }
    }
}

. , , Storyboard ControlTemplate, Generic.xaml.cs. .

, , BasicCustomControl. :

Generic.xaml:

<!-- language: lang-xml -->
xmlns:local="using:UserAndCustomControls">
<Style TargetType="local:BasicCustomControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:BasicCustomControl">
                <Border x:Name="Border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <Border.Resources>
                        <Storyboard x:Name="pointerDownStoryboard">
                            <PointerDownThemeAnimation TargetName="Border" />
                        </Storyboard>
                        <Storyboard x:Name="pointerUpStoryboard">
                            <PointerUpThemeAnimation TargetName="Border" />
                        </Storyboard>
                    </Border.Resources>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

BasicCustomControl.cs:

<!-- language: lang-cs -->
protected override void OnPointerPressed(PointerRoutedEventArgs e)
{
    ((Storyboard)this.Resources["PointerDownThemeAnimation"]).Begin(this);
}

. Begin() , , System.Runtime.InteropServices.COMException.

SO: XAML WPF XBAP?

, . VisualState , , : Quickstart:

, , - , , - . , - , .

:

  • Standard130ItemTemplate "" ?
  • , "" , , ( / )?
  • , - XAML +?
  • XAML? ?
  • ?
  • , ? .
+5
1

. . (, "Assets/Image.png" ). , , , .

    <Style x:Key="ImageButtonStyle" TargetType="ButtonBase">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Grid x:Name="RootGrid" Background="Transparent">
                    <Image x:Name="ImageLabel" Source="{TemplateBinding Content}"/>
                    <Rectangle
                            x:Name="FocusVisualWhite"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"/>
                    <Rectangle
                            x:Name="FocusVisualBlack"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"/>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation TargetName="ImageLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualWhite"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                    <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualBlack"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetName="OutlineGlyph" Storyboard.TargetProperty="Opacity"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundCheckedGlyph" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource AppBarItemPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
0

More articles:


All Articles