【WPF學習】第六十六章 支持可視化狀態

時間  2020-04-13
標籤 WPF學習 第六 十六 支持 可視化 狀態 简体版
原文   原文鏈接

　　上一章介紹的ColorPicker控件，是控件設計的最好示例。由於其行爲和可視化外觀是精心分離的，因此其餘設計人員可開發動態改變其外觀的新模板。編程

　　ColorPicker控件如此簡單的一個緣由是不涉及狀態。換句話說，不根據是否具備焦點、鼠標是否在它上面懸停、是否禁用等狀態區分其可視化外觀。接下來本章介紹的FlipPanel自定義控件有些不一樣。app

　　FlipPanel控件背後的基本思想是，爲駐留內容提供兩個表面，但每次只有一個表面是可見的。爲看到其餘內容，須要在兩個表面之間進行「翻轉」。可經過控件模板定製翻轉效果，但默認效果使用在前面和後面之間進行過渡的淡化效果。根據應用程序，可使用FlipPanel控件把數據條目表單與一些由幫助的文檔組合起來，以便爲相同的數據提供一個簡單或較複雜的試圖，或在一個簡單遊戲中將問題和答案融合在一塊兒。框架

　　可經過代碼執行翻轉(經過設置名爲IsFlipped的屬性)，也可以使用一個便捷的按鈕來翻轉面板(除非控件使用這從模板中移除了該按鈕)。ide

　　顯然，控件模板須要制定兩個獨立部分：FlipPanel控件的先後內容區域。然而，還有一個細節——FlipPanel控件須要一種方法在兩個狀態之間進行切換：翻轉過的狀態與未翻轉過的狀態。可經過爲模板添加觸發器完成該工做。當單擊按鈕是，可以使用一個觸發器隱藏前面的面板並顯示第二個面板，而使用另外一個觸發器翻轉這些更改。這兩個觸發器均可以使用喜歡的任何動畫。但經過使用可視化狀態，可向控件使用這清晰地指明這兩個狀態是模板的必須部分，不是爲適當的屬性或事件編寫觸發器，控件使用能管着只須要填充適當的狀態動畫。若是使用Expression Blend，該任務甚至變得更簡單。函數

1、開始編寫FlipPanel類佈局

　　FlipPanel的基本骨架很是簡單。包含用戶可用單一元素(最有多是包含各類元素的佈局容器)填充的兩個內容區域。從技術角度看，這意味着FlipPanel控件不是真正的面板，由於不能使用佈局邏輯組織一組子元素。然而，這不會形成問題。由於FlipPanel控件的結構是清晰直觀的。FlipPanel控件還包含一個翻轉按鈕，用戶可以使用該按鈕在兩個不一樣的內容區域之間進行切換。動畫

　　儘管可經過繼承自ContentControl或Panel等控件類來建立自定義控件，可是FlipPanel直接繼承自Control基類。若是不須要特定控件類的功能，這是最好的起點。不該該當繼承自更簡單的FrameworkElement類，除非但願建立不使用標準控件和模板基礎框架的元素：this

public class FlipPanel:Control
    {

    }

　　首先爲FlipPanel類建立屬性。與WPF元素中的幾乎全部屬性同樣，應使用依賴項屬性。如下代碼演示了FlipPanel如何定義FrontContent屬性，該屬性保持在前表面上顯示的元素。編碼

public static readonly DependencyProperty FrontContentProperty =
            DependencyProperty.Register("FrontContent", typeof(object), typeof(FlipPanel), null);

　　接着須要調用基類的GetValue()和SetValue()方法的常規.NET屬性過程，以便修改依賴性屬性。下面是FrontContent屬性的實現過程：spa

 /// <summary>
/// 前面內容
/// </summary>
public object FrontContent
{
   get { return GetValue(FrontContentProperty); }
   set { SetValue(FrontContentProperty, value); }
}

　　同理，還須要一個存儲背面的依賴項屬性。以下所示：

public static readonly DependencyProperty BackContentProperty =
            DependencyProperty.Register("BackContent", typeof(object), typeof(FlipPanel), null);

        /// <summary>
        /// 背面內容
        /// </summary>
        public object BackContent
        {
            get { return GetValue(BackContentProperty); }
            set { SetValue(BackContentProperty, value); }
        }

　　還須要添加一個重要屬性：IsFlipped。這個Boolean類型的屬性持續跟蹤FlipPanel控件的當前狀態(面向前面仍是面向後面)，使控件使用者可以經過編程翻轉狀態：

public static readonly DependencyProperty IsFlippedProperty =
            DependencyProperty.Register("IsFlipped", typeof(bool), typeof(FlipPanel), null);

        /// <summary>
        /// 是否翻轉
        /// </summary>
        public bool IsFlipped
        {
            get { return (bool)GetValue(IsFlippedProperty); }
            set { 
                SetValue(IsFlippedProperty, value);
                ChangeVisualState(true);
            }
        }

　　IsFlipped屬性設置器調用自定義方法ChangeVisualState()。該方法確保更新顯示以匹配當前的翻轉狀態。稍後介紹ChangeVisualState方法。

　　FlipPanel類不須要更多屬性，由於它實際上從Control類繼承了它所須要的幾乎全部內容。一個例外是CornerRadius屬性。儘管Control類包含了BorderBrush和BorderThickness屬性，可使用這些屬性在FlipPanel控件上繪製邊框，但缺乏將方形邊緣變成光滑曲線的CornerRadius屬性，如Border元素所作的那樣。在FlipPanel控件中實現相似的效果很容易，前提是添加CornerRadius依賴性屬性並使用該屬性配置FlipPanel控件的默認控件模板中的Border元素：

public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(FlipPanel), null);

        /// <summary>
        /// 控件邊框圓角
        /// </summary>
        public CornerRadius CornerRadius
        {
            get
            {
                return (CornerRadius)GetValue(CornerRadiusProperty);
            }
            set
            {
                SetValue(CornerRadiusProperty, value);
            }
        }

　　還須要爲FlipPanel控件添加一個應用默認模板的樣式。將該樣式放在generic.xaml資源字典中，正如在開發ColorPicker控件時所作的那樣。下面是須要的基本骨架：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">
    <Style TargetType="{x:Type local:FlipPanel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FlipPanel">
                    ...
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

　　還有最後一個細節。爲通知控件從generic.xaml文件獲取默認樣式，須要在FlipPanel類的靜態構造函數中調用DefaultStyleKeyProperty.OverrideMetadata()方法：

DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipPanel), new FrameworkPropertyMetadata(typeof(FlipPanel)));

2、選擇部件和狀態

　　如今已經具有了基本結構，而且已經準備好肯定將在控件模板中使用的部件和狀態了。

　　顯然，FlipPanel須要兩個狀態：

  • 　　正常狀態。該故事板確保只有前面的內容是可見的，後面的內容被翻轉、淡化或移出試圖。
  • 　　翻轉狀態。該故事板確保只有後面的內容是可見的，前面的內容經過動畫被移出試圖。

　　此外，須要兩個部件：

  • 　　FlipButton。這是一個按鈕，當單擊該按鈕時，將試圖從前面改到後面(或從後面改到前面)。FlipPanel控件經過處理該按鈕的事件提供該服務。
  • 　　FlipButtonAlternate。這是一個可選元素，與FlipButton的工做方式相同。容許控件使用者在自定義模板中使用兩種不一樣的方法。一種選擇是使用在可翻轉區域外的單個翻轉按鈕、另外一種選擇是在可翻轉區域的面板兩側放置獨立的翻轉按鈕。

　　還應當爲先後內容區域添加部件。然而，FlipPanel克難攻堅不須要直接操做這些區域，只要模板包含在適當的時間隱藏和顯示它們的動畫便可(另外一種選擇是定義這些部件，從而能夠明確地使用代碼改變它們的可見性。這樣一來，即便沒有定義動畫，經過隱藏一部分並顯示另外一部分，面板仍能在先後內容區域之間變化。爲簡單起見，FlipPanel沒有采起這種選擇)。

　　爲表面FlipPanel使用這些部件和狀態的事實，應爲自定義控件類應用TemplatePart特性，以下所示：

    [TemplatePart(Name = "FlipButton", Type = typeof(ToggleButton))]
    [TemplatePart(Name = "FlipButtonAlternate", Type = typeof(ToggleButton))]
    [TemplateVisualState(Name = "Normal", GroupName = "ViewStates")]
    [TemplateVisualState(Name = "Flipped", GroupName = "ViewStates")]
    public class FlipPanel : Control
    {

    }

3、默認控件模板

　　如今，可將這些內容投入到默認控件模板中。根元素是具備兩行的Grid面板，該面板包含內容區域(在頂行)和翻轉按鈕(在底行)。用兩個相互重疊的Border元素填充內容區域，表明前面和後面的內容，但一次只顯示前面和後面的內容。

　　爲了填充前面和後面的內容區域，FlipPanel控件使用ContentControl元素。該技術幾乎和自定義按鈕示例相同，只是須要兩個ContentPresenter元素，分別用於FlipPanel控件的前面和後面。FlipPanel控件還包含獨立的Border元素來封裝每一個ContentPresenter元素。從而讓控件使用者能經過設置FlipPanel的幾個直接屬性勾勒出可翻轉內容區域(BorderBrush、BorderThickness、Background以及CornerRadius)，而不是強制性地手動添加邊框。

　　下面是默認控件模板的基本骨架：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:CustomControls">
    <Style TargetType="{x:Type local:FlipPanel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:FlipPanel}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>

                        <!-- This is the front content. -->
                        <Border x:Name="FrontContent" BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               CornerRadius="{TemplateBinding CornerRadius}"
               >
                            <ContentPresenter
                     Content="{TemplateBinding FrontContent}">
                            </ContentPresenter>
                        </Border>

                        <!-- This is the back content. -->
                        <Border x:Name="BackContent" BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}"
           CornerRadius="{TemplateBinding CornerRadius}"
           >
                            <ContentPresenter
                     Content="{TemplateBinding BackContent}">
                            </ContentPresenter>
                        </Border>

                        <!-- This the flip button. -->
                        <ToggleButton Grid.Row="1" x:Name="FlipButton" 
                     Margin="0,10,0,0" >
                        </ToggleButton>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

　　當建立默認控件模板時，最好避免硬編碼控件使用者可能但願定製的細節。相反，須要使用模板綁定表達式。在這個示例中，使用模板綁定表達式設置了幾個屬性：BorderBrush、BorderThickness、CornerRadius、Background、FrontContent以及BackContent。爲設置這些屬性的默認值(這樣即便控件使用者沒有設置它們，也仍然確保能獲得正確的可視化外觀)，必須爲控件的默認樣式添加額外的設置器。

　　一、翻轉按鈕

　　在上面的示例中，顯示的控件模板包含一個ToggleButton按鈕。然而，該按鈕使用ToggleButton的默認外觀，這使得ToggleButton按鈕看似廣泛的按鈕，徹底具備傳統的陰影背景。這對於FlipPanel控件是不合適的。

　　儘管可替換ToggleButton中的任何內容，但FlipPanel須要進一步。它須要去掉標準的背景並根據ToggleButton按鈕的狀態改變其內部元素的外觀。

　　爲建立這種效果，須要爲ToggleButton設置自定義控件模板。該控件模板可以包含繪製所需箭頭的形狀元素。在該例中，ToggleButton是使用用於繪製圓的Ellipse元素和用於繪製箭頭的Path元素繪製的，這兩個元素都放在具備單個單元格的Grid面板中，以及須要一個改變箭頭指向的RotateTransform對象：

<ToggleButton Grid.Row="1" x:Name="FlipButton" RenderTransformOrigin="0.5,0.5"
                     Margin="0,10,0,0" Width="19" Height="19">
                            <ToggleButton.Template>
                                <ControlTemplate>
                                    <Grid>
                                        <Ellipse Stroke="#FFA9A9A9"  Fill="AliceBlue"  />
                                        <Path Data="M1,1.5L4.5,5 8,1.5"
                             Stroke="#FF666666" StrokeThickness="2"
                             HorizontalAlignment="Center" VerticalAlignment="Center">
                                        </Path>
                                    </Grid>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.RenderTransform>
                                <RotateTransform x:Name="FlipButtonTransform" Angle="-90"></RotateTransform>
                            </ToggleButton.RenderTransform>
                        </ToggleButton>

　　二、定義狀態動畫

　　狀態動畫是控件模板中最有趣的部分。它們是提供翻轉行爲的要素，它們仍是爲FlipPanel建立自定義模板的開發人員最有可能修改的細節。

　　爲定義狀態組，必須在控制模板的根元素中添加VisualStateManager.VisualStateGroups元素，以下所示：

 <ControlTemplate TargetType="{x:Type local:FlipPanel}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            ...
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
</ControlTemplate>

　　可在VisualStateGroups元素內部使用具備合適名稱的VisualStateGroup元素建立狀態組。在每一個VisualStateGroup元素內部，爲每一個狀態添加一個VisualState元素。對於FlipPanel面板，有一個包含兩個可視化狀態的組：

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="ViewStates">
       <VisualState x:Name="Normal">
            <Storyboard>
               ...
            </Storyboard>
       </VisualState>
   </VisualStateGroup>
   <VisualStateGroup x:Name="FocusStates">
       <VisualState x:Name="Flipped">
            <Storyboard>
               ...
            </Storyboard>
       </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

　　每一個狀態對應一個具備一個或多個動畫的故事板。若是存在這些故事板，就會在適當的時機觸發它們(若是不存在，控件將按正常方式降級，而不會引起錯誤)。

　　在默認控件模板中，動畫使用簡單的淡化效果從一個內容區域改變到另外一個內容區域，並使用旋轉變換翻轉ToggleButton箭頭使其指向另外一個方向。下面是完成這兩個任務的標記：

<VisualState x:Name="Normal">
     <Storyboard>
           <DoubleAnimation Storyboard.TargetName="BackContent" 
                       Storyboard.TargetProperty="Opacity" To="0" Duration="0" ></DoubleAnimation>
     </Storyboard>
</VisualState>

<VisualState x:Name="Flipped">
    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="90" Duration="0">    
        </DoubleAnimation>
     <DoubleAnimation Storyboard.TargetName="FrontContent" 
                       Storyboard.TargetProperty="Opacity" To="0" Duration="0"></DoubleAnimation>
    </Storyboard>
</VisualState>

　　經過上面標記，發現可視化狀態持續時間設置爲0，這意味着動畫當即應用其效果。這看起來可能有些怪——畢竟，不是須要更平緩的改變從而可以注意到動畫效果嗎？

　　時機上，該設計完成正確，由於可視化狀態用於表示控件在適當狀態時的外觀。例如，當翻轉面板處於翻轉過的狀態是，簡單地顯示其背面內容。翻轉過程是在FlipPanel控件進入翻轉狀態前得過渡，而不是翻轉狀態自己的一部分。

　　三、定義狀態過渡

　　過渡是從當前狀態到新狀態的動畫。變換模型的優勢之一是不須要爲動畫建立故事板。例如，若是添加以下標記，WPF會建立持續時間爲0.7秒得動畫以改變FlipPanel控件的透明度，從而建立所但願的悅目的褪色效果：

 <VisualStateGroup x:Name="ViewStates">
      <VisualStateGroup.Transitions>
           <VisualTransition GeneratedDuration="0:0:0.7">    
           </VisualTransition>
      </VisualStateGroup.Transitions>
      <VisualState x:Name="Normal">
       ...
      </VisualState>
</VisualStateGroup>

　　過渡會應用到狀態組，當定義過渡時，必須將其添加到VisualStateGroup.Transitions集合。這個示例使用最簡單的過渡類型：默認過渡。默認過渡應用於該組中的全部狀態變化。

　　默認過渡是很方便的，但用於全部狀況的解決方案不可能老是適合的。例如，可能但願FlipPanel控件根據其進入的狀態以不一樣的速度過渡。爲實現該效果，須要定義多個過渡，而且須要設置To屬性以指示什麼時候應用過渡效果。

　　例如，若是有如下過渡：

<VisualStateGroup.Transitions>
       <VisualTransition To="Flipped" GeneratedDuration="0:0:0.5"></VisualTransition>
       <VisualTransition To="Normal" GeneratedDuration="0:0:0.1"></VisualTransition>
</VisualStateGroup.Transitions>

　　FlipPanel將在0.5秒得時間內切換到Flipped狀態，並在0.1秒得時間內進入Normal狀態。

　　這個示例顯示了當進入特定狀態時應用的過渡，但還可以使用From屬性建立當離開某個狀態時應用的過渡，而且可結合使用To和From屬性來建立更特殊的只有當在特定的兩個狀態之間移動時纔會應用的過渡。當應用過渡時WPF遍歷過渡集合，在全部應用的過渡中查找最特殊的過渡，並只使用最特殊的那個過渡。

　　爲進一步加以控制，可建立自定義過渡動畫來替換WPF一般使用的自動生成的過渡。可能會猶因爲幾個緣由而建立自定義過渡。下面是一些例子：使用更復雜的動畫控制動畫的步長，使用動畫緩動、連續運行幾個動畫或在運行動畫時播放聲音。

　　爲定義自定義過渡，在VisualTransition元素中放置具備一個或多個動畫的故事板。在FlipPanel示例中，可以使用自定義過渡確保ToggleButton箭頭更快遞旋轉自身，而淡化過程更緩慢：

<VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.7" To="Flipped">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="90" Duration="0:0:0.2"></DoubleAnimation>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition GeneratedDuration="0:0:0.7" To="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
       Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0.2"></DoubleAnimation>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>

　　但許多控件須要自定義過渡，並且編寫自定義過渡是很是乏味的工做。仍需保持零長度的狀態動畫，這還會不可避免地再可視化狀態和過渡之間複製一些細節。

　　四、關聯元素

　　經過上面的操做，已經建立了一個至關好的控件模板，須要在FlipPanel控件中添加一些內容以使該模板工做。

　　訣竅是使用OnApplyTemplate()方法，該方法還款用於在ColorPicker控件中設置綁定。對於FlipPanel控件，OnApplyTemplate()方法用於爲FlipButton和FlipButtonAlternate部件檢索ToggleButton，併爲每一個部件關聯事件處理程序，從而當用戶單擊以翻轉控件時可以進行響應。最後，OnApplyTemplate()方法調用名爲ChangeVisualState()的自定義方法，該方法確保控件的可視化外觀和其當前狀態的相匹配：

public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            ToggleButton flipButton = base.GetTemplateChild("FlipButton") as ToggleButton;
            if (flipButton != null) flipButton.Click += flipButton_Click;

            // Allow for two flip buttons if needed (one for each side of the panel).
            // This is an optional design, as the control consumer may use template
            // that places the flip button outside of the panel sides, like the 
            // default template does.
            ToggleButton flipButtonAlternate = base.GetTemplateChild("FlipButtonAlternate") as ToggleButton;
            if (flipButtonAlternate != null)
                flipButtonAlternate.Click += flipButton_Click;

            this.ChangeVisualState(false);
        }

　　下面是很是簡單的容許用戶單擊ToggleButton按鈕並翻轉面板的事件處理程序：

private void flipButton_Click(object sender, RoutedEventArgs e)
        {
            this.IsFlipped = !this.IsFlipped;
        }

　　幸運的是，不須要手動觸發狀態動畫。即不須要建立也不須要觸發過渡動畫。相反，爲從一個狀態改變到另外一個狀態，只須要調用靜態方法VisualStateManager.GoToState()。當調用該方法時，傳遞正在改變狀態的控件對象的引用、新狀態的名稱以及肯定是否顯示過渡的Boolean值。若是是由用戶引起的改變(例如，當用戶單擊ToggleButton按鈕時)，該值應當爲true；若是是由屬性設置引起的改變(例如，若是使用頁面的標記設置IsFlipped屬性的初始值)，該值爲false。

　　處理控件支持的全部不一樣狀態可能會變得凌亂。爲避免在整個控件代碼中分散調用GoToState()方法，大多數控件添加了與在FlipPanel控件中添加的ChangeVisualState()相似地方法。該方法負責應用每一個狀態組中的正確狀態。該方法中的代碼使用If語句塊(或switch語句)應用每一個狀態組的當前狀態。該方法之因此可行，是由於它徹底可使用當前狀態的名稱調用GoToState()方法。在這種狀況下，若是當前狀態和請求的狀態相同，那麼什麼也不會發生。

　　下面是用於FlipPanel控件的ChangeVisualState()方法：

private void ChangeVisualState(bool useTransitions)
{
            if (!this.IsFlipped)
            {
                VisualStateManager.GoToState(this, "Normal", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Flipped", useTransitions);
            }
}

　　一般在如下位置調用ChangeVisualState()方法或其等效的方法：

  • 　　在OnApplyTemplate()方法的結尾，在初始化控件以後。
  • 　　在響應表明狀態變化的事件時，例如鼠標移動或單擊ToggleButton按鈕。
  • 　　當響應屬性改變或經過代碼觸發方法時(例如，IsFlipped屬性設置器調用ChangEVisualState()方法而且老是提供true，因此顯示過渡動畫。若是但願爲控件使用者提供不顯示過渡的機會，可添加Flip()方法，該方法接受與爲ChangeVisualState()方法傳遞的相同的Boolean參數)。

　　正如上面介紹的，FlipPanel控件很是靈活。例如，可以使用該控件而且不使用ToggleButton按鈕，經過代碼進行翻轉(多是當用戶單擊不一樣的控件時)。也可在控件模板中包含一兩個翻轉按鈕，而且容許用戶進行控制。

4、使用FlipPanel控件

　　使用FlipPanel控件相對簡單。標記以下所示：

<Window x:Class="CustomControlsClient.FlipPanelTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="FlipPanelTest" Height="300" Width="300" 
        xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls" >
    <Grid x:Name="LayoutRoot" Background="White">
        <lib:FlipPanel x:Name="panel" BorderBrush="DarkOrange" BorderThickness="3" IsFlipped="True"
         CornerRadius="4" Margin="10">
            <lib:FlipPanel.FrontContent>
                <StackPanel Margin="6">
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkOrange">This is the front side of the FlipPanel.</TextBlock>
                    <Button Margin="3" Padding="3" Content="Button One"></Button>
                    <Button Margin="3" Padding="3" Content="Button Two"></Button>
                    <Button Margin="3" Padding="3" Content="Button Three"></Button>
                    <Button Margin="3" Padding="3" Content="Button Four"></Button>
                </StackPanel>
            </lib:FlipPanel.FrontContent>
            <lib:FlipPanel.BackContent>
                <Grid Margin="6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkMagenta">This is the back side of the FlipPanel.</TextBlock>
                    <Button Grid.Row="2" Margin="3" Padding="10" Content="Flip Back to Front" HorizontalAlignment="Center" VerticalAlignment="Center" Click="cmdFlip_Click"></Button>
                </Grid>
            </lib:FlipPanel.BackContent>
        </lib:FlipPanel>
    </Grid>
</Window>

　　當單擊FlipPanel背面的按鈕時，經過編程翻轉面板：

private void cmdFlip_Click(object sender, RoutedEventArgs e)
        {
            panel.IsFlipped = !panel.IsFlipped;
        }

 本實例源碼：FlipPanel.zip

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程