開發(fā)工具

Visual Studio

WPF

布局中的一些使用問題

布局

Grid：Grid是一個(gè)二維布局容器主到，可以將控件按照行和列進(jìn)行排列摊册。
StackPanel：StackPanel是一個(gè)一維布局容器号杠，可以將控件按照垂直或水平方向進(jìn)行排列嗜暴。
Canvas：Canvas是一個(gè)坐標(biāo)布局容器胀莹，可以將控件按照指定的坐標(biāo)位置進(jìn)行放置。
WrapPanel：WrapPanel是一個(gè)自動(dòng)換行的布局容器瞧挤，可以將控件在垂直或水平方向上自動(dòng)換行锡宋。
Dock：Dock是一個(gè)停靠布局容器皿伺，可以將控件驮北纾靠在窗口的左邊盒粮、右邊鸵鸥、上邊或下邊。
relative：Relative是一個(gè)相對(duì)布局容器丹皱，可以將控件相對(duì)于其父控件或兄弟控件進(jìn)行定位妒穴。

<Window>
//最外層容器
//讓整個(gè)容器變成圓角
<Window.Clip>
        <RectangleGeometry Rect="0,0,857,483" RadiusX="25" RadiusY="25"/>
    </Window.Clip>
</Window

//ScrollViewer  需要滾動(dòng)條的時(shí)候使用
<ScrollViewer  VerticalScrollBarVisibility="auto"  Padding="10,0">
</ScrollViewer>

//Border  由于Grid、stackPanel摊崭、WrapPanel沒有邊框讼油，所以需要用到Border來當(dāng)邊框的容器。
<Border  BorderThickness="0,1,1,1" BorderBrush="#FFE9EBF6">
</Border  >

//Grid 表格的形式布局呢簸。
<Grid Margin="0 0 0 0"  Background="#F6F7FB" >
</Grid >

//WrapPanel 有點(diǎn)類似DIV矮台，有Orientation屬性可以設(shè)置垂直水平布局乏屯，比tackPanel級(jí)別高點(diǎn)。
<WrapPanel Margin="0 0 0 0"  Background="#F6F7FB" >
</WrapPanel>

相應(yīng)式布局

//想類似DIV一樣垂直布局需要先使用一個(gè)WrapPanel 包住垂直布局瘦赫，里面的元素才可以不堆疊在一起辰晕。

<WrapPanel Orientation="Vertical"  Width="800">

    <StackPanel Orientation="Horizontal">
            <Label Content="*"  />
            <Label Content="模型名稱："  FontSize="16"/>
             <TextBox x:Name="ModeNameTextBox"  />
    </StackPanel>

 <StackPanel Orientation="Horizontal">
            <Label Content="*"  />
            <Label Content="模型名稱："  FontSize="16"/>
             <TextBox x:Name="ModeNameTextBox"  />
    </StackPanel>

 <StackPanel Orientation="Horizontal">
            <Label Content="*"  />
            <Label Content="模型名稱："  FontSize="16"/>
             <TextBox x:Name="ModeNameTextBox"  />
    </StackPanel>

</WrapPanel>

自適應(yīng)遇到的寬度問題

要使WPF容器的的大小為100%，您需要設(shè)置容器的寬度和高度屬性為“填充父級(jí)容器”或“父級(jí)容器大小”其中确虱，ParentCtrl是父級(jí)容器的名稱含友。通過這種方式，Grid將自動(dòng)填充其父級(jí)容器的大小校辩，并且當(dāng)父級(jí)容器的大小更改時(shí)窘问，Grid的大小將自動(dòng)調(diào)整。

<WrapPanel Name="ParentCtrl">
<Grid Grid.Row="1" Grid.Column="1" Width="{Binding ActualWidth, ElementName=ParentCtrl}" Height="{Binding ActualHeight, ElementName=ParentCtrl}">  
    <!-- content here -->  
</Grid>
</WrapPanel>

window

<!– window背景圖片的使用 -->
<Window
Title="ChipTest"
Height="600"
Width="900"
 WindowStartupLocation="CenterScreen"
WindowState="Maximized" 
Cursor="" 
Closing="Window_Closing"
Background="#ffffffff"
>
<!– 使用背景圖片 -->
<Window.Background>
        <ImageBrush ImageSource ="Image\zhuce.png"/>
    </Window.Background>

</Window>

Grid

常用的布局是Grid宜咒，內(nèi)容再根據(jù)布局來填寫位置

<Grid Background="LightGray" Margin="10">  

//設(shè)置行

<Grid.RowDefinitions> 
//這里設(shè)置每一行參數(shù)
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
</Grid.RowDefinitions> 

//設(shè)置列
<Grid.ColumnDefinitions> 
//這里設(shè)置每一列參數(shù)
         <ColumnDefinition Width = "*" /> 
 </Grid.ColumnDefinitions>

//網(wǎng)格中的內(nèi)容
<Button Content="Button 1" Grid.Row="0" Grid.Column="0" Background="Red" />  
<TextBlock Text="Text Block 1" Grid.Row="0" Grid.Column="1" TextAlignment="Center" FontSize="16" Margin="5" /> 

</Grid>

常用的屬性:
Background：設(shè)置Grid的背景色惠赫。
Margin：設(shè)置Grid的外邊距，即與相鄰元素的距離故黑。
ColumnDefinitions：定義Grid的列汉形。在本例中，我們定義了三列倍阐，其中第一列和第三列的寬度為“”（自動(dòng)調(diào)整）概疆，中間列的寬度為“Auto”（根據(jù)內(nèi)容自適應(yīng)）。
RowDefinitions：定義Grid的行峰搪。在本例中岔冀，我們定義了三行，其中第一行和第三行的寬度為“”（自動(dòng)調(diào)整）概耻，中間行的寬度為“Auto”（根據(jù)內(nèi)容自適應(yīng)）使套。
Grid.Row 和 Grid.Column：指定控件所在的行和列。在本例中鞠柄，我們使用這些屬性將每個(gè)按鈕和文本塊定位到不同的單元格侦高。
Background：設(shè)置控件的背景色。
TextAlignment：設(shè)置文本塊的文本對(duì)齊方式厌杜。在本例中奉呛，我們將其設(shè)置為居中對(duì)齊。
FontSize：設(shè)置文本塊的字體大小夯尽。
Margin：設(shè)置文本塊的外邊距瞧壮，即與相鄰元素的距離。

不過沒有邊框設(shè)置匙握，需要邊框時(shí)得在里層加個(gè)<border/>,或者使用圖片做背景的時(shí)候也需要用到咆槽。

<!– 背景圖片的使用 -->
<Grid Margin="-1,0,1,0"   ShowGridLines="True" >
<!– 使用背景圖片 -->
        <Border BorderBrush="Transparent" BorderThickness="0">
            <Image Source="Image\zhuce.png" Stretch="Uniform"/>
        </Border>
</Window>

其中ShowGridLines="True" 是顯示布局的線，一般用來檢查的圈纺。

StackPanel

常用的水平排版容器
StackPanel是XAML中的一個(gè)布局控件秦忿，用于將元素以垂直或水平方向堆疊在一起麦射。

<StackPanel Orientation="Horizontal">  
    <Button Content="Button 1" />  
    <Button Content="Button 2" />  
</StackPanel>

屬性：
Orientation：指定元素的堆疊方向〉埔ィ可選值為Vertical（垂直）和Horizontal（水平）法褥。默認(rèn)為Vertical。
Children：包含StackPanel的子元素酬屉“氲龋可以通過添加子元素來在StackPanel中放置其他控件。
ItemSpacing：設(shè)置StackPanel中元素之間的間距呐萨。默認(rèn)值為0杀饵。
FlowDirection：設(shè)置StackPanel中元素的排列方向∶粒可選值為LeftToRight（從左到右）和RightToLeft（從右到左）切距。默認(rèn)為LeftToRight。

樣式的用法

Image圖片

圖片的用法有點(diǎn)特別惨远，首先圖片需要設(shè)置圖片的屬性谜悟，“生成操作”設(shè)置為資源（resource）,“復(fù)制到輸出目錄”為“始終復(fù)制”

image.png

1、jpg/png

<!– 圖片-->
<Image Stretch="Uniform" Source="images/example.png"  MouseDown="Image_MouseDown" MouseUp="Image_MouseUp" MouseMove="Image_MouseMove"/>

Source 屬性：指定圖片的源文件路徑或 URL北秽∑闲遥可以使用相對(duì)路徑或絕對(duì)路徑。
Stretch 屬性：指定圖片的拉伸方式贺氓∥颠叮可以使用以下值之一：
None：不拉伸圖片，保持其原始大小辙培。
Uniform：將圖片按相同比例拉伸蔑水，以適應(yīng)控件的大小。
UniformToFill：將圖片按相同比例拉伸扬蕊，以填充控件搀别，但保持圖片的縱橫比。
Fill：將圖片放大或縮小以填充控件尾抑，不保持圖片的縱橫比歇父。
Alignment 屬性：指定圖片在容器中的對(duì)齊方式÷可以使用以下值之一：
TopLeft：將圖片頂部對(duì)齊庶骄，左對(duì)齊。
TopCenter：將圖片頂部對(duì)齊践磅，水平居中對(duì)齊。
TopRight：將圖片頂部對(duì)齊灸异，右對(duì)齊府适。
CenterLeft：將圖片水平居中對(duì)齊羔飞，左對(duì)齊。
Center：將圖片水平居中對(duì)齊檐春，垂直居中對(duì)齊逻淌。
CenterRight：將圖片水平居中對(duì)齊，右對(duì)齊疟暖。
BottomLeft：將圖片底部對(duì)齊卡儒，左對(duì)齊。
BottomCenter：將圖片底部對(duì)齊俐巴，水平居中對(duì)齊骨望。
BottomRight：將圖片底部對(duì)齊，右對(duì)齊欣舵。
PointerEntered 和 PointerExited 事件：用于在鼠標(biāo)進(jìn)入或離開圖片時(shí)觸發(fā)相應(yīng)的事件處理程序擎鸠。
MouseDown、MouseUp缘圈、MouseMove 等事件：用于在鼠標(biāo)按下劣光、松開或移動(dòng)時(shí)觸發(fā)相應(yīng)的事件處理程序。
Tag 屬性：用于存儲(chǔ)與圖片相關(guān)的自定義數(shù)據(jù)糟把【钗校可以在事件處理程序中訪問該屬性。

2遣疯、GIF圖片

1垂寥、<!– 安裝XamlAnimatedGif庫 -->
第一步 使用Nuget安裝XamlAnimatedGif包

2、<!– xaml界面引用XamlAnimatedGif庫 -->
xmlns:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"

3另锋、<!– xaml -->
 <Image gif:AnimationBehavior.SourceUri="Resources/loading.gif" Width="50" Height="50"></Image>

SVG圖片

這個(gè)示例也是在按鈕中增加SVG圖標(biāo)

1滞项、<!– 安裝SharpVectors庫 -->
第一步 使用Nuget安裝sharpvectors包
2、<!– 頁面引入SharpVectors庫 -->
 xmlns:svgc = "http://sharpvectors.codeplex.com/svgc/"
3夭坪、<!– 頁面以svgc的標(biāo)簽加入SVG圖片 -->
<Button  Width="150" Height="30" Background="#FF6C83F7" Foreground="White">
                    <WrapPanel Height="30" Width="150">
                        <svgc:SvgViewbox IsHitTestVisible="False"  Source="Resources/新增.svg" Margin="20 2 10 0" Width="20" Height="20"/>
                        <TextBlock TextWrapping="Wrap" Text="新建模型" Width="90" FontSize="14" VerticalAlignment="Center" Padding="10,0,0,0" HorizontalAlignment="Left" Margin="-4,0,0,0"/>
                    </WrapPanel>
                </Button>

常用表單

//CS
<WrapPanel Orientation="Vertical"  Width="800">
//單選
                <StackPanel Orientation="Horizontal" Margin="100,0,0,0">
                    <Label Content="*"  Margin="0,0,0,0"  Foreground="Red"/>
                    <Label Content="算法名稱："  />
                    <RadioButton x:Name="ImageClassificationRadioButton" Content="圖像分類" Margin="0,5,0,0"  />
                    <RadioButton x:Name="DataClassificationRadioButton" Content="數(shù)據(jù)分類" Margin="20,5,0,0"  />
                    <RadioButton x:Name="UnsupervisedLearningRadioButton" Content="無監(jiān)督學(xué)習(xí)" Margin="20,5,0,0"  />
                </StackPanel>
//輸入框
                <StackPanel Orientation="Horizontal" Margin="100,15,0,0">
                    <Label Content="*"  Margin="0,0,0,0"   Foreground="Red"/>
                    <Label Content="模型名稱：" />
                    <TextBox x:Name="ModeNameTextBox"  TextWrapping="Wrap" Text="" Width="500" Height="30" />
                </StackPanel>
//文字域
                <StackPanel Orientation="Horizontal" Margin="100,15,0,0">
                    <Label Content="*"   Foreground="Red"/>
                    <Label Content="模型描述："  />
                    <TextBox x:Name="ModeDescriptionTextBox"  TextWrapping="Wrap" Text=""  Width="500" Height="100" AcceptsReturn ="True"/>
                </StackPanel>   

//下拉選項(xiàng)
<StackPanel Orientation="Horizontal" Margin="115,15,0,0">
                    <Label Content="所屬項(xiàng)目：" />
                    <ComboBox  Width="500" Height="30"   Padding="5">
                        <ComboBoxItem Content="項(xiàng)目Title" IsSelected="True" />
                    </ComboBox>
                </StackPanel>

    
</WrapPanel>       

按鈕

//按鈕的樣式設(shè)置
                <Button  Content="+ 馬上開始診斷預(yù)測(cè)" HorizontalAlignment="Center" Margin="0 30 0 0" Width="300"  FontSize="18" Height="65" Foreground="White" >
                    <Button.Template>
                        <ControlTemplate TargetType="{x:Type Button}">
                          //使用border來設(shè)置圓角
                            <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="5">
                               //使用樣式設(shè)置鼠標(biāo)移過等效果
                                <Border.Style>
                                    <Style TargetType="Border">
                                          <Setter Property="Background" Value="#545A72"/>
                                          <Setter Property="BorderBrush" Value="Black"/>
                                          <Setter Property="BorderThickness" Value="0"/>
                                          <Style.Triggers>
                                               <Trigger Property="IsMouseOver" Value="True">
                                                   <Setter Property="Background" Value="#799EFF"/>
                                               </Trigger>
                                          </Style.Triggers>
                                       </Style>
                                    </Border.Style>
                       <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
                </Button.Template>
                 </Button>

圓角

//圓角背景

<Window x:Class="ESPCPS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ESPCPS"
        mc:Ignorable="d"
        Title="系統(tǒng)" Height="500" Width="800"  WindowStyle="None"  AllowsTransparency="True" Background="Transparent" 
OpacityMask="White" 
ResizeMode="NoResize" 
MouseMove="Window_MouseMove" >
    <Border BorderThickness="1" BorderBrush="Gray"  CornerRadius="25,25,25,25">
        <Grid Width="800" Margin="0" Height="500"  >
            <Border BorderThickness="0" CornerRadius="25,25,25,25">
                <Border.Background>
                    <ImageBrush ImageSource="beijing.jpg"/>
                </Border.Background>
            </Border>
        </Grid>
    </Border>
</Window>

//容器圓角

<Border CornerRadius="10" Background="#ccc">
          <StackPanel>
                <TextBlock Text="這是一個(gè)圓角的容器" Margin="10"/>
                 <TextBlock Text="里面可以放置其他控件" Margin="10"/>
           </StackPanel>
</Border>

//按鈕圓角

<Button x:Name="but1" Content="軟件介紹" HorizontalAlignment="Left" Margin="126,356,0,0" VerticalAlignment="Top" Width="128" Click="Button_Click" FontSize="20" Height="35" >
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="10">
                            <Border.Background>#FF8EB4D4</Border.Background>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

//TextBox圓角

<TextBox HorizontalAlignment="Left" Height="24" Margin="43,192,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="98">
                <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="8"/>
                        <Setter Property="BorderBrush" Value="#c1d0dc"/>
                    </Style>
                </TextBox.Resources>
            </TextBox>

//PasswordBox設(shè)置圓角

 <PasswordBox x:Name="t2" HorizontalAlignment="Left" Margin="183,150,0,0" VerticalAlignment="Top" Width="114" Height="26" BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" FontSize="18" Password="&#xD;&#xA;">
                <PasswordBox.Resources>
                    <Style TargetType="PasswordBox">
                        <Setter Property="PasswordChar" Value="●"/>
                        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                        <Setter Property="Padding" Value="1"/>
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                        <Setter Property="AllowDrop" Value="true"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="PasswordBox">
                                    <Border CornerRadius="8" x:Name="Bd" Background="White" BorderBrush="#c1d0dc" BorderThickness="1" OpacityMask="{x:Null}">
                                        <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Template="{DynamicResource ScrollViewerControlTemplate1}"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </PasswordBox.Resources>
            </PasswordBox>

Style樣式的使用

頁面上定義樣式

<Window >
  <Window.Resources>
<Style TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#FF545A72" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Foreground" Value="#FF545A72" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <Style TargetType="{x:Type Label}">
            <Setter Property="Foreground" Value="#FF545A72" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Foreground" Value="#FF545A72" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="Foreground" Value="#FF545A72" />
            <Setter Property="FontSize" Value="14" />
        </Style>
 </Window.Resources>
</Window >

style在window中使用x:Key="mybutton1"設(shè)置文判，然后在元素中使用Style="{StaticResource mybutton1}"調(diào)用。

<Window.Resources>
        <!--通用按鈕樣式-->
        <Style TargetType="{x:Type Button}" x:Key="mybutton1">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="5">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="#FF377EFF"/>
                                    <Setter Property="BorderBrush" Value="White"/>
                                    <Setter Property="BorderThickness" Value="0"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="#799EFF"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

XMAL中調(diào)用

<Button  Style="{StaticResource mybutton1}"/>

關(guān)于隱藏的問題

 // 設(shè)置Grid的可見性為false室梅，使其不可見戏仓，而且不占用空間 
grid1.Visibility = Visibility.Collapsed;  
  
// 設(shè)置Grid的可見性為true，使其可見  
grid1.Visibility = Visibility.Visible;

通過設(shè)置Grid的Visibility屬性來控制其可見性亡鼠。
通過設(shè)置grid1的Visibility屬性為Collapsed或Visible赏殃，可以控制Grid的可見性。
當(dāng)isibility屬性設(shè)置為Collapsed時(shí)间涵，Grid控件將不可見仁热，并且不會(huì)占用容器空間。
當(dāng)Visibility屬性設(shè)置為Visible時(shí)勾哩，Grid控件將可見抗蠢，并占用容器空間举哟。

CS常用的一些方法

按鈕常用事件

單擊

可以做一些類似tabs的一些效果

//XAML
<Button  Content="單擊" HorizontalAlignment="Center" Click="showDrive" Margin="0 40 0 0" Width="228"  FontSize="18" Height="45" Foreground="White" ></Button>
<Grid x:Name="GridName1"></Grid>
<Grid x:Name="GridName2"></Grid>

//CS
private void showDrive(object sender, RoutedEventArgs e)
        {
            GridName1.Visibility = Visibility.Collapsed;//點(diǎn)擊后改變名字為GridName1的元素的可見性
            GridName2.Visibility = Visibility.Visible;//點(diǎn)擊后改變名字為GridName2的元素的可見性
        }

點(diǎn)擊彈窗

/* 畫布詳情-彈窗-文件上傳///////////////////////////////////////////////*/
        /*文件上傳*/
        private void CanvasFileUpdate2(object sender, RoutedEventArgs e)
        {
            CanvasFileUpdate2 cooperate = new CanvasFileUpdate2();
            cooperate.Show();
        }

測(cè)試彈窗打印

<!– 測(cè)試彈窗打印-->
   MessageBox.Show("常量");
MessageBox.Show(“常量”+變量.ToString());

在.CS中修改樣式的方法

//xmal
<TextBlock x:Name="TestabilityLabel" TextWrapping="Wrap" Style="{StaticResource mytextcolor2}"  />
//CS
 TestabilityLabel.Style = FindResource("mybutton1_s_unable") as Style;
//按條件修改樣式
ModelingText.Style = Global.Modeling ? FindResource("mytext") as Style : FindResource("mytext2") as Style;

注意的問題：

1.表格默認(rèn)單元格的數(shù)據(jù)是可以編輯的，需要設(shè)置 IsReadOnly="True"的屬性迅矛。

 <DataGrid  IsReadOnly="True">

2.分欄控制器的頭部tabs需要隱藏的話妨猩，要設(shè)置ShowHeader="False"屬性。

<avalon:LayoutDocumentPane x:Name="DocumentPane"  ShowHeader="False">

后端修改樣式的一些用法

private void EditPassWordButton_Click(object sender, RoutedEventArgs e)
        {
            ButtonToPassword.Style = (Style)FindResource("mybutton4b");//修改樣式名
            AccountSettingsButton.Background = new SolidColorBrush(Colors.Transparent);//修改背景
            BoxToPassword.Visibility = Visibility.Visible;//修改可見性
            BoxToPhone.Visibility = Visibility.Hidden;//修改可見性
        }

自定義好看的tabs

設(shè)計(jì)兩種狀態(tài)的tabs按鈕的樣式
style

<!--通用按鈕樣式4-->
        <Style TargetType="{x:Type Button}" x:Key="mybutton4">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="5">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="#f4f7ff"/>
                                    <Setter Property="BorderBrush" Value="#f4f7ff"/>
                                    <Setter Property="BorderThickness" Value="1"/>
                                    <Setter Property="Cursor" Value="Arrow"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="#f4f7ff"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--通用按鈕樣式4b-->
        <Style TargetType="{x:Type Button}" x:Key="mybutton4b">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="5">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="#ffffff"/>
                                    <Setter Property="BorderBrush" Value="#f4f7ff"/>
                                    <Setter Property="BorderThickness" Value="1"/>
                                    <Setter Property="Cursor" Value="Hand"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="#f4f7ff"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

. XMAL
設(shè)計(jì)按鈕控件

<!--tab按鈕-->
        <WrapPanel x:Name="AccountSettingsGroup1" Orientation="Vertical"   Grid.Column="1" Margin="20 0 0 0" HorizontalAlignment="Stretch">
            <WrapPanel Orientation="Horizontal">
                <Button x:Name="ButtonToPassword" Style="{StaticResource mybutton4}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="235" Height="105"  Margin="0 10 -2 0" Background="#f4f7ff" BorderBrush="{x:Null}"  Click="EditPassWordButton_Click">
                    <WrapPanel Height="95" >
                        <Image Stretch="UniformToFill" Source="Image/iconSet1.png" Height="76" Width="77" Margin="20 5 0 0"/>
                        <TextBlock TextWrapping="Wrap" Text="修改密碼" Width="90" FontSize="12" VerticalAlignment="Center" Padding="10,0,0,0" HorizontalAlignment="Left" Margin="-4,0,0,0"/>
                    </WrapPanel>
                </Button>
                <Button x:Name="ButtonToPhone"  Style="{StaticResource mybutton4b}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="235" Height="105" Margin="10 10 -2 0" Background="Transparent" BorderBrush="{x:Null}"  Click="EditPhomeButton_Click">
                    <WrapPanel Height="95">
                        <Image Stretch="UniformToFill" Source="Image/iconSet2.png" Height="86" Width="53"  Margin="20 5 0 0"/>
                        <TextBlock TextWrapping="Wrap" Text="綁定手機(jī)" Width="90" FontSize="12" VerticalAlignment="Center" Padding="10,0,0,0" HorizontalAlignment="Left" Margin="-4,0,0,0"/>
                    </WrapPanel>
                </Button>
            </WrapPanel>

            <Border Margin="0 10 0 0" HorizontalAlignment="Stretch" BorderBrush="#f4f7ff" BorderThickness="0 0 0 1"></Border>

tabs容器代碼

<WrapPanel x:Name="PersonalInformationGroup" Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Stretch" >
</WrapPanel>
        
 
 <WrapPanel x:Name="AccountSettingsGroup1" Orientation="Vertical"   Grid.Column="1" Margin="20 0 0 0" HorizontalAlignment="Stretch">
</WrapPanel>

.cs代碼

//跳轉(zhuǎn)修改密碼
        private void EditPassWordButton_Click(object sender, RoutedEventArgs e)
        {
            ButtonToPassword.Style = (Style)FindResource("mybutton4");
            ButtonToPhone.Style = (Style)FindResource("mybutton4b");

            BoxToPassword.Visibility = Visibility.Visible;
            BoxToPhone.Visibility = Visibility.Collapsed;
        }

        //跳轉(zhuǎn)修改電話
        private void EditPhomeButton_Click(object sender, RoutedEventArgs e)
        {
            ButtonToPassword.Style = (Style)FindResource("mybutton4b");
            ButtonToPhone.Style = (Style)FindResource("mybutton4");

            BoxToPassword.Visibility = Visibility.Collapsed;
            BoxToPhone.Visibility = Visibility.Visible;
        }