WPF之MahApps.Metro下载和WPF学习经验

    这几天一直在学习WPF的东西。刚开始以为和Winform一样.拖拽控件来进行布局。结果远远没有那么简单。很多东西都需要自己写。包括样式。今天给大家分享一个 MahApps.Metro.

  首先在NuGet程序包里搜索MahApps.Metro然后下载。当然说到这里。有些大家在搜索NuGET的时候等待时间过长,搜索不到之类的。以及一些有关方面的一个博客。我好多东西都是从他的博客总结。

 链接:http://www.wxzzz.com/

 当然我自己写个很逗比的东西，是才接触WPF做的。有兴趣的或者才开始学的可以看下。至于大神级别的希望可以指点下。

 

<controls:MetroWindow x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        Title="测试按钮" Height="350" Width="525">
    <controls:MetroWindow.RightWindowCommands>
        <controls:WindowCommands>
            <Button Content="settings" />
            <Button Content="设置" />
        </controls:WindowCommands>
    </controls:MetroWindow.RightWindowCommands>


    <Grid>
        <Rectangle Height="350" Stroke="White" Fill="SkyBlue"></Rectangle>
        <Button Content="点击逐渐增长" Height="31" HorizontalAlignment="Left" Margin="29,37,0,0" Name="btnGrowAdd" VerticalAlignment="Top" Width="119" Click="btnGrowAdd_Click" />
        <Button Content="点击逐渐归位" Height="31" HorizontalAlignment="Left" Margin="29,87,0,0" Name="btnBack" VerticalAlignment="Top" Width="119" Click="btnBack_Click" />

        <StackPanel Grid.Row="3" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20,0,0,0">
            <Border Width="317" Height="67" RenderTransformOrigin="0.391,0.424">
                <Border.Background>
                    <ImageBrush ImageSource="/images/绿色输入框.png"/>
                </Border.Background>
                <TextBox x:Name="Phone" Style="{DynamicResource InPutTextBox}"  Width="270"  VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Phone}" Margin="38,21,9,20" Height="26"/>
            </Border>
        </StackPanel>
        <Button Height="31" HorizontalAlignment="Left" Margin="99,207,0,0" Name="btnGrow" VerticalAlignment="Top" Width="119" Click="btnGrow_Click" >
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="ThisBorder" Cursor="Hand" CornerRadius="3" BorderThickness="0">
                        <Border.Background>
                            <ImageBrush ImageSource="/images/普通按钮.png"/>
                        </Border.Background>
                        <Border VerticalAlignment="Center" HorizontalAlignment="Center">

                            <Label FontFamily="微软雅黑" FontSize="15" Foreground="White" Content="点击增长" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>

                        </Border>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ThisBorder" Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="/images/普通按钮按下.png"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>


        </Button>

        <Button Content="弹出" Height="31" HorizontalAlignment="Left"  Name="btndc" VerticalAlignment="Top" Width="119" Click="btndc_Click" Margin="99,279,0,0">
            <Button.Background>
                <ImageBrush ImageSource="/images/普通按钮.png"/>
            </Button.Background>

        </Button>
        <Button Content="SS" Height="31" HorizontalAlignment="Left"  x:Name="btnss" VerticalAlignment="Top" Width="119" Margin="223,278,0,0" Click="btnss_Click">
            <Button.Background>
                <ImageBrush ImageSource="images/普通按钮.png"/>
            </Button.Background>

        </Button>
        <Button Content="小球" Height="31" HorizontalAlignment="Left"  x:Name="xiuqiu" VerticalAlignment="Top" Width="119"  Margin="99,243,0,0" Click="xiuqiu_Click">
            <Button.Background>
                <ImageBrush ImageSource="images/普通按钮.png"/>
            </Button.Background>

        </Button>



    </Grid>
</controls:MetroWindow>

  这个是 wpf窗体的程序，这里面用过MahApps.Metro部分的。其中要把默认的Window  改为controls:MetroWindow。后台的 window 也改为MetroWindow

附上后台代码。只是为了测试几个按钮的效果。

public MainWindow()
        {
            InitializeComponent();
            btnGrowAdd.Click += new RoutedEventHandler(btnGrowAdd_Click);
            btnBack.Click += new RoutedEventHandler(btnBack_Click);
            btnGrow.Click += new RoutedEventHandler(btnGrow_Click);
        }
       

      
       
     

        //点击增长
        private void btnGrow_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation widthAnimation = new DoubleAnimation() { By = 50, Duration = TimeSpan.FromSeconds(0.2) };
            btnGrow.BeginAnimation(Button.WidthProperty, widthAnimation);
            Phone.Text += 2;
        }

       

        private void btnGrowAdd_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation widthAnimation = new DoubleAnimation()
            {
                To = this.Width - 30,
                Duration = TimeSpan.FromSeconds(1)
            };
            DoubleAnimation heightAnimation = new DoubleAnimation()
            {
                To = (this.Height - 40) / 3,
                Duration = TimeSpan.FromSeconds(1)
            };
            btnGrowAdd.BeginAnimation(Button.WidthProperty, widthAnimation);
            btnGrowAdd.BeginAnimation(Button.HeightProperty, heightAnimation);
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
          
            DoubleAnimation widthAmination = new DoubleAnimation();
            widthAmination.Duration = TimeSpan.FromSeconds(1);
            DoubleAnimation heightAmimation = new DoubleAnimation();
            heightAmimation.Duration = TimeSpan.FromSeconds(1);
            btnGrow.BeginAnimation(Button.WidthProperty, widthAmination);
            btnGrow.BeginAnimation(Button.HeightProperty, widthAmination);
            btnGrowAdd.BeginAnimation(Button.WidthProperty, widthAmination);
            btnGrowAdd.BeginAnimation(Button.HeightProperty, heightAmimation);
            Phone.Text = "";
        }

        private void btndc_Click(object sender, RoutedEventArgs e)
        {
            this.ShowMessageAsync("标题", "内容", MessageDialogStyle.Affirmative, new MetroDialogSettings() { AffirmativeButtonText = "确定" });
        }

  最后感谢大家花时间看。因为这是第一次写博客，希望大家多提意见。一起进步。。