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 = "確定" });
        }

  最后感謝大家花時間看。因為這是第一次寫博客，希望大家多提意見。一起進步。。