基于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”，所以就导致了循环一个事件中不断的变大，另一个事件中不停地缩小，然后谁都停止不了。目前没想到解决办法。。。。
