基于Page的Wpf界面+动态按钮

windows.xaml

<NavigationWindow x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1"  ShowsNavigationUI="False" Source="Index.xaml" Navigating="NavigationWindow_Navigating" ResizeMode="NoResize" AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen" MouseMove="NavigationWindow_MouseMove">
    <NavigationWindow.Background>
        <SolidColorBrush />
    </NavigationWindow.Background>
</NavigationWindow>

window.xaml.cs

using System.Windows.Input;
using System.Windows.Navigation;

namespace WpfApplication1
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 :NavigationWindow
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void NavigationWindow_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                this.DragMove();
            }
        }
    }
}

index.xaml

<Page x:Class="WpfApplication1.Index"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
    Title="Index" Height="300" Width="400">
    <Border CornerRadius="20">
        <Border.Effect>
            <DropShadowEffect BlurRadius="15"/>
        </Border.Effect>
        <Border.Background>
            <ImageBrush ImageSource="Resources/pdc.jpg" Stretch="Fill"/>
        </Border.Background>
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="76*" />
                <RowDefinition Height="211*" />
                <RowDefinition Height="11*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="34*" />
                <ColumnDefinition Width="100*" />
                <ColumnDefinition Width="264*" />
            </Grid.ColumnDefinitions>
                <Image Source="Resources/123.jpg" Stretch="Fill" Cursor="Hand" Grid.Row="1" Grid.Column="1" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="LogoScale" CenterX="90" CenterY="96"/>
                     </Image.RenderTransform>
                </Image>
            </Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition />
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image x:Name="setup" Source="Resources/setup.png" Grid.Row="3" Grid.Column="3" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image_MouseLeftButtonDown_3" MouseEnter="setup_MouseEnter" MouseLeave="setup_MouseLeave">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="Setup" CenterX="90" CenterY="96"></ScaleTransform>
                    </Image.RenderTransform>
                </Image>
                <Image x:Name="prompt1" Source="Resources/prompt.png" Stretch="Fill" Cursor="Hand" Grid.Row="3" Grid.Column="4" Visibility="Hidden" MouseLeftButtonDown="prompt1_MouseLeftButtonDown">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="prompt2" CenterX="90" CenterY="96"/>
                    </Image.RenderTransform>
                </Image>
                <Border  Grid.Column="4" VerticalAlignment="Top" HorizontalAlignment="Right" Background="White">
                    <Image x:Name="exit" Height="30" Width="40" Source="Resources/exit.png" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="exit_MouseLeftButtonDown"></Image>
                </Border>
                <Border Grid.Row="4" Width="20" Height="20"  VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="White"/>
                <Button Content="test" Grid.Column="2" Click="Button_Click"></Button>
            </Grid>
    </Grid>
    </Border>
</Page>

index.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Navigation;

namespace WpfApplication1
{
    /// <summary>
    /// Page1.xaml 的交互逻辑
    /// </summary>
    public partial class Index : Page
    {
        Scale scle;

        public Index()
        {
            InitializeComponent();
        }

        private void exit_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Application.Current.Shutdown();
        }

        private void Image_MouseLeftButtonDown_3(object sender, MouseButtonEventArgs e)
        {
            NavigationService.Navigate(new Uri("Page1.xaml", UriKind.Relative));
        }

        private void setup_MouseEnter(object sender, MouseEventArgs e)
        {
            scle = new Scale(Setup,"Down");
            scle.AdjustScale();
        }

        private void setup_MouseLeave(object sender, MouseEventArgs e)
        {
            scle = new Scale(Setup, "Up");
            scle.AdjustScale();
        }

        private void Image_MouseEnter(object sender, MouseEventArgs e)
        {
            scle = new Scale(LogoScale, "Down");
            scle.AdjustScale();
        }

        private void Image_MouseLeave(object sender, MouseEventArgs e)
        {
            scle = new Scale(LogoScale, "Up");
            scle.AdjustScale();
        }

        public void prompt(bool bo)
        {
            prompt1.Visibility = System.Windows.Visibility.Visible;
            scle = new Scale(prompt2, "all");
            scle.AdjustScale();
        }

        private void prompt1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            scle.Stoptime();
            prompt1.Visibility = System.Windows.Visibility.Collapsed;
            NavigationService.Navigate(new Uri("Page2.xaml", UriKind.Relative));
        }
        /// <summary>
        /// 此处改为事件触发
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            prompt(true);
        }
    }
}

Page1.xaml

<Page x:Class="WpfApplication1.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    Title="Index" Height="300" Width="400">
    <Border CornerRadius="20">
        <Border.Effect>
            <DropShadowEffect BlurRadius="15"/>
        </Border.Effect>
        <Border.Background>
            <ImageBrush ImageSource="Resources/setupbj.jpg"></ImageBrush>
        </Border.Background>
        <Grid> 
            <Grid.RowDefinitions>
                <RowDefinition Height="44*" />
                <RowDefinition Height="208*" />
                <RowDefinition Height="48*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="69*" />
                <ColumnDefinition Width="255*" />
                <ColumnDefinition Width="76*" />
            </Grid.ColumnDefinitions>
            <Border CornerRadius="20">
                <Image Cursor="Hand" Source="Resources/back.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="back" CenterX="90" CenterY="96"></ScaleTransform>
                    </Image.RenderTransform>
                </Image>
            </Border> 
            <Border Grid.Row="2" Height="20" Width="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="White"/>             
            <Border Grid.Column="2" VerticalAlignment="Top"  HorizontalAlignment="Right" Background="White">
                <Image Cursor="Hand" Height="30" Width="40" Source="Resources/exit.png" MouseLeftButtonDown="Image_MouseLeftButtonDown_1" />
            </Border>
        </Grid>
    </Border>
</Page>

Page.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Navigation;

namespace WpfApplication1
{
    /// <summary>
    /// Page1.xaml 的交互逻辑
    /// </summary>
    public partial class Page1 : Page
    {
        Scale scale;
        public Page1()
        {
            InitializeComponent();
        }

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            NavigationService.Navigate(new Uri("Index.xaml", UriKind.Relative));
        }

        private void Image_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
        {
            Application.Current.Shutdown();
        }

        private void Image_MouseEnter(object sender, MouseEventArgs e)
        {
            scale =new Scale(back, "Down");
            scale.AdjustScale();
        }

        private void Image_MouseLeave(object sender, MouseEventArgs e)
        {
            scale = new Scale(back, "Up");
            scale.AdjustScale();
        }
    }
}

scale.cs

using System;
using System.Windows.Media;

namespace WpfApplication1
{
    public class Scale
    {
        private System.Windows.Threading.DispatcherTimer timer;
        ScaleTransform st;
        string str;

        public Scale(ScaleTransform st,string str)
        {
            this.st = st;
            this.str = str;
        }

        void timer_Tick(object sender, EventArgs e)
        {
            Add();
        }

        public void AdjustScale()
        {
            if (str == "Down")
            {
                if (st.ScaleX < 1.05)
                {
                    st.ScaleX += 0.05;
                    st.ScaleY += 0.05;
                }
            }
            else if (str == "Up")
            {
                if (st.ScaleX > 1.0)
                {
                    st.ScaleX -= 0.05;
                    st.ScaleY -= 0.05;
                }
            }
            else
            {
                timer = new System.Windows.Threading.DispatcherTimer();
                timer.Interval = TimeSpan.FromMilliseconds(10);
                timer.Tick += new EventHandler(timer_Tick);
                timer.Start();
            }
        }

        public void Add()
        {
            if (st.ScaleX < 1.20)
            {
                st.ScaleX += 0.05;
                st.ScaleY += 0.05;
            }
            else if (st.ScaleX > 1.0)
            {
                st.ScaleX -= 0.05;
                st.ScaleY -= 0.05;
            }
        }

        public void Stoptime()
        {
            timer.Stop();
        }
    }
}

接下来的Page2基本与1相同，之前这段代码也是用的别人的，在使用过程中发现一个问题，就是timer在使用时不能很好的停止，即使是鼠标移开后也在不停地缩小和变大图标。所以修改了一下，把两个图标变化移除了timer的控制。但 想要更好的使用渐变，还是要加上timer，我觉得问题可能出现在事件独立的同时出现了交叉，也就是说两次用来判断是否停止的ScaleX和ScaleY 的值是同一个，而timer则是不同的“timer”，所以就导致了循环一个事件中不断的变大，另一个事件中不停地缩小，然后谁都停止不了。目前没想到解决办法。。。。