WhilteBoard 第一版


<Window x:Class="WhiteBoard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="550" Width="750">
    <Window.Resources>
        <Style x:Key="BorderStyle">
            <Setter Property="Border.Margin" Value="5" />
            <Setter Property="Border.Width" Value="90" />
            <Setter Property="Border.Height" Value="90" />
            <Setter Property="Border.CornerRadius" Value="45" />
            <Setter Property="Border.BorderThickness" Value="2" />
            <Setter Property="Border.BorderBrush" Value="Gray" />
            <Setter Property="Border.Opacity" Value="0.4" />
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <TranslateTransform />
                        <ScaleTransform />
                        <RotateTransform />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" To="1" />
                                <!--<ThicknessAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Margin" To="5, 5, 5, 5" />-->
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="MeunuBorderStyle" TargetType="Border">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Width" Value="46" />
            <Setter Property="Height" Value="46" />
            <Setter Property="CornerRadius" Value="23" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="Gray" />
        </Style>
        <Style x:Key="MeunStackPanelBorderStyle" TargetType="Border">
            <Setter Property="Margin" Value="10" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="LightBlue" />
            <Setter Property="CornerRadius" Value="5" />
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <TranslateTransform />
                        <ScaleTransform />
                        <RotateTransform />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Margin="10" Orientation="Horizontal" Grid.Row="1">
            <Border Style="{StaticResource BorderStyle}" MouseDown="Border_MouseDown" >
                <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.card.1.png" />
            </Border>
            <Border Style="{StaticResource BorderStyle}" MouseDown="Border_MouseDown" >
                <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.card.2.png" />
            </Border>
            <Border Style="{StaticResource BorderStyle}" MouseDown="Border_MouseDown" >
                <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.card.3.png" />
            </Border>
            <Border Style="{StaticResource BorderStyle}" MouseDown="Border_MouseDown" >
                <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.card.4.png" />
            </Border>
            <Border Style="{StaticResource BorderStyle}" MouseDown="Border_MouseDown" >
                <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.card.5.png" />
            </Border>

        </StackPanel>
        <StackPanel x:Name="ButtonStackPanel">
            <Border Style="{StaticResource MeunStackPanelBorderStyle}">
                <StackPanel Orientation="Horizontal" >
                    <Border Style="{StaticResource MeunuBorderStyle}" >
                        <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.cards.club.png" />
                    </Border>
                    <Border Style="{StaticResource MeunuBorderStyle}" >
                        <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.cards.diamond.png" />
                    </Border>
                    <Border Style="{StaticResource MeunuBorderStyle}" >
                        <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.cards.spade.png" />
                    </Border>
                    <Border Style="{StaticResource MeunuBorderStyle}" >
                        <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.cards.heart.png" />
                    </Border>
                </StackPanel>
            </Border>

            <Border Style="{StaticResource MeunStackPanelBorderStyle}">
                <StackPanel Orientation="Horizontal" Visibility="Hidden" >
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.connection.1x.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.connection.3g.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.connection.4g.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.connection.ev.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.connection.bluetooth.png" />
                </Border>
            </StackPanel>
            </Border>

            <Border Style="{StaticResource MeunStackPanelBorderStyle}">
                <StackPanel Orientation="Horizontal" Visibility="Hidden" >
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.currency.cent.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.currency.dollar.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.currency.yen.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.currency.pound.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.currency.rupee.png" />
                </Border>
            </StackPanel>
            </Border>

            <Border Style="{StaticResource MeunStackPanelBorderStyle}">
                <StackPanel Orientation="Horizontal" Visibility="Hidden" >
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.draw.brush.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.draw.button.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.draw.marker.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.draw.pen.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.draw.pencil.png" />
                </Border>
            </StackPanel>
            </Border>

            <Border Style="{StaticResource MeunStackPanelBorderStyle}">
                <StackPanel Orientation="Horizontal" Visibility="Hidden" >
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.page.1.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.page.2.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.page.3.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.page.4.png" />
                </Border>
                <Border Style="{StaticResource MeunuBorderStyle}" MouseDown="Border_MouseDown" >
                    <Image Source="pack://application:,,,/Icons;Component/wp/light/appbar.page.5.png" />
                </Border>
            </StackPanel>
            </Border>
        </StackPanel>
    </Grid>
</Window>

>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WhiteBoard
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Border_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var border = sender as Border;
            if (border != null)
            {
                TransformGroup group = border.RenderTransform as TransformGroup;
                var translateTransform = group.Children[0] as TranslateTransform;

                if (translateTransform != null)
                {
                    DoubleAnimation doubleAnimation = new DoubleAnimation(0, -45, new Duration(TimeSpan.FromMilliseconds(1000)));
                    doubleAnimation.EasingFunction = new BounceEase() { Bounces = 1, EasingMode = EasingMode.EaseOut, Bounciness = 3 };
                    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("RenderTransform.Children[0].Y"));
                    Storyboard translationStoryboard = new Storyboard();
                    translationStoryboard.Children.Add(doubleAnimation);
                    translationStoryboard.Begin(border);
                }
            }


            //展开按钮菜单

            var borderPanel = ButtonStackPanel.Children[0] as Border;
            TransformGroup group2 = borderPanel.RenderTransform as TransformGroup;
            var translate = group2.Children[0] as TranslateTransform;

            //Point offset = 【Visual】.TransformToAncestor(window).Transform(new Point(0, 0));
            //Visual是你需要获得坐标的对象。

            Point offset = border.TransformToAncestor(this).Transform(new Point(0, 0));//获取元素相对窗体的坐标

            if (translate != null)
            {
                DoubleAnimation animation1 = new DoubleAnimation();
                animation1.To = offset.X + border.ActualWidth;
                animation1.EasingFunction = new BounceEase() { Bounces = 1, EasingMode = EasingMode.EaseOut, Bounciness = 3 };
                Storyboard.SetTargetProperty(animation1, new PropertyPath("RenderTransform.Children[0].X"));
                Storyboard storyboard1 = new Storyboard();
                storyboard1.Children.Add(animation1);
                storyboard1.Begin(borderPanel);


                DoubleAnimation animation2 = new DoubleAnimation();
                animation2.To = offset.Y - border.ActualHeight / 2 - 30;
                animation2.EasingFunction = new BounceEase() { Bounces = 1, EasingMode = EasingMode.EaseOut, Bounciness = 3 };
                Storyboard.SetTargetProperty(animation2, new PropertyPath("RenderTransform.Children[0].Y"));
                Storyboard storyboard2 = new Storyboard();
                storyboard2.Children.Add(animation2);

                storyboard2.Begin(borderPanel);
            }

        }
    }
}

知识共享许可协议
《WhilteBoard 第一版》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: