WPF小試牛刀

最近想寫點技術總結，WPF正好從來沒寫過，就寫這個了，分成4個例子，如下：

• Mouse移入移出效果
• DataGrid模版
• 怪異Window效果
• Ribbon效果

 源代碼下載

Mouse移入移出效果

效果圖（分別是鼠標移動過3個button時的效果{當前按鈕清晰顯示、其他按鈕模糊顯示}）

XAML主代碼如下：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="121" Width="306" Loaded="App_Loaded">
    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Height="60" Width="249">
        <Button x:Name="btn1" Content="Button1" Width="249" MouseEnter="btn_MouseEnter" MouseLeave="btn_MouseLeave"/>
        <Button x:Name="btn2" Content="Button2" Width="249" MouseEnter="btn_MouseEnter" MouseLeave="btn_MouseLeave"/>
        <Button x:Name="btn3" Content="Button3" Width="249" MouseEnter="btn_MouseEnter" MouseLeave="btn_MouseLeave"/>
        //這3個按鈕是用MouseEnter/MouseLeave連接C#event的，這里用的比較臃腫，實際上可以通過Style.Triggers能解決，大家自己解決吧

    </StackPanel>

</Window>

 cs主代碼如下：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private List<Button> buttons = new List<Button>();

        private void App_Loaded(object sender, RoutedEventArgs e)
        {
            buttons.Add(btn1);//把按鈕加入List，以便后續的reset樣式操作
            buttons.Add(btn2);
            buttons.Add(btn3);
            buttons.ForEach(t => t.Style = (Style)t.FindResource("DefaultButtonStyle")); //這個FindResource是找到目標對象的資源的意思
        }

        private void btn_MouseEnter(object sender, MouseEventArgs e)
        {
            buttons.ForEach(t => t.Style = (Style)t.FindResource("DefaultButtonStyle"));//同上

            Button btn = sender as Button;
            if (btn != null)
                btn.Style = (Style)btn.FindResource("HighlightedButtonStyle");//同上
        }

        private void btn_MouseLeave(object sender, MouseEventArgs e)
        {
            Button btn = sender as Button;
            if (btn != null)
                btn.Style = (Style)btn.FindResource("DefaultButtonStyle");//同上
        }
    }

 

　　　　樣式定義和資源定義如下：　　　　　　   

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="DefaultButtonStyle">    //這個就是默認樣式（里面定義了模糊效果）
        <Setter Property="Effect">
            <Setter.Value>
                 <BlurEffect Radius="2"></BlurEffect>         //Radius就是模糊效果
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Gray"></Setter>
    </Style>
    <Style TargetType="Button" x:Key="HighlightedButtonStyle">  //這個是當前鼠標時的樣式
        <Setter Property="Effect" Value="{x:Null}"></Setter>    //這句定義了remove effect（效果）樣式，就變清晰了
        <Setter Property="Background" Value="Green"></Setter>
    </Style>
</ResourceDictionary>

 

DataGrid模版

效果圖(關注點是里面的True/False==> Checkbox的是否選中)：

XAML代碼：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Win_Loaded">
        <DataGrid x:Name="dgList" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="500" ItemsSource="{Binding}" AutoGenerateColumns="False">       //這個必須寫，不然下面的{Binding Path=XXXXXXXX}和{Binding XXXXXXXX}就沒有value了
            <DataGrid.Columns>                                                                                                                                           //{Binding Path=XXXXXXXX}和{Binding XXXXXXXX}效果是一樣的
                <DataGridTextColumn Header="Title" Binding="{Binding Path=Title}"></DataGridTextColumn>
                <DataGridTextColumn Header="Description" Binding="{Binding Path=Description}"></DataGridTextColumn>
                <DataGridTemplateColumn Header="Selected?">           //這列是模板列，非常類似於ASP.NET中DataGrid時代的格式...
                    <DataGridTemplateColumn.CellEditingTemplate>      //編輯時的模板 
                        <DataTemplate>
                            <CheckBox IsChecked="{Binding IsSelected}"></CheckBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                    <DataGridTemplateColumn.CellTemplate>             //正常時的模板
                        <DataTemplate>
                            <TextBlock Text="{Binding IsSelected}"></TextBlock>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
</Window>                                                            //上面的4個Binding標記后面的Title/Description/IsSelected是Entity的屬性，在后面有定義

 C#代碼很簡單：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }


        private ObservableCollection<SampleData> data = new ObservableCollection<SampleData>();
        private void Win_Loaded(object sender, RoutedEventArgs e)
        {
            for (var i = 0; i < 20;i++ )
                data.Add(new SampleData() {  Title="this is title "+i, Description="this is description "+i, IsSelected=(i%2==0)});

            dgList.DataContext = data;                     //綁定數據
        }
    }

    public class SampleData
    {
        public string Title { get; set; }                   //這些屬性和XAML中的Binding一致 public string Description { get; set; }
        public bool IsSelected { get; set; }
    }

 

 

怪異Window效果

效果圖（就一光禿禿的怪異窗口...）

這個代碼只有xaml，沒有C#代碼：

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None" Background="#00000000">    //需要先把最外部的Window樣式設置成透明的
    <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="100" Margin="88,85,0,0" VerticalAlignment="Top" Width="341" CornerRadius="50" Background="#FFE4C5C5">  //CornerRadius就是圓角化的代碼
        <Border.LayoutTransform>
            <TransformGroup>
                <RotateTransform Angle="20"/>  //旋轉20度...
            </TransformGroup>
        </Border.LayoutTransform>
    </Border>
</Window>

 

Ribbon效果

效果圖：

這個例子比較特別，原先繼承自Window類，現在要修改為繼承自RibbonWindow類，如下：

public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void App_Loaded(object sender, RoutedEventArgs e)
        {
            //this.Resources.MergedDictionaries.Add(PopularApplicationSkins.);
        }
    }

 XAML代碼如下：

<RibbonWindow x:Class="WpfApplication4.MainWindow"                                                         //RibbonWindow也是要跟着修改過來的（原先的是Window）
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="App_Loaded">
    <DockPanel HorizontalAlignment="Left" Height="323" LastChildFill="False" VerticalAlignment="Top" Width="517">
        <Ribbon Height="323" VerticalAlignment="Top" DockPanel.Dock="Top">
            <Ribbon.ApplicationMenu>
                <RibbonApplicationMenu>
                    <RibbonApplicationMenuItem Header="command1" ImageSource="icons\Chemistry.ico"/>
                    <RibbonApplicationMenuItem  Header="command2" ImageSource="icons\Chemistry.ico">
                        <RibbonApplicationMenuItem Header="command1" ImageSource="icons\Chemistry.ico"/>
                        <RibbonApplicationMenuItem Header="command2" ImageSource="icons\Chemistry.ico"/>
                    </RibbonApplicationMenuItem>
                    <RibbonSeparator />
                    <RibbonApplicationMenuItem  Header="command3"/>
                </RibbonApplicationMenu>
            </Ribbon.ApplicationMenu>
            <RibbonTab  Header="Tab1">
            </RibbonTab>
            <RibbonTab  Header="Tab2">
                <RibbonGroup>
                    <RibbonButton Height="18" VerticalAlignment="Top" Width="200" SmallImageSource="icons\Chemistry.ico" Content="CommandX" Label="CommandX"/>
                    <RibbonButton Height="18" VerticalAlignment="Top" Width="200" SmallImageSource="icons\Chemistry.ico" Content="CommandX" Label="CommandY"/>
                </RibbonGroup>
                <RibbonGroup>
                    <RibbonButton VerticalAlignment="Top" LargeImageSource="icons\Chemistry.ico" Content="CommandXX" Label="CommandZ"/>
                </RibbonGroup>
            </RibbonTab>
            <RibbonQuickAccessToolBar Margin="0" Width="70" >
                <RibbonButton HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="22" SmallImageSource="icons\Chemistry.ico"/>
                <RibbonButton HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="22" SmallImageSource="icons\CHIP2.ico" />
                <RibbonButton HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="22" SmallImageSource="icons\clock.ico" />
            </RibbonQuickAccessToolBar>
        </Ribbon>
    </DockPanel>
</RibbonWindow>

 需要成功運行這個例子，需要增加一步，就是引用Ribbon的dll，如下：

源代碼下載