WPF開源控制項擴充庫ControlzEx

WPF開源控制項擴充庫ControlzEx

開源分享

最後更新 2021/6/19 下午1:45
沙漠尽头的狼
預計閱讀 7 分鐘
分類
WPF
專題
WPF開源專案 C#開源專案
標籤
.NET C# WPF WPF開源專案 開源
  • 原文連結:https://github.com/ControlzEx/ControlzEx
  • 翻譯:沙漠盡頭的狼(谷歌及百度提供翻譯支援)

Shared Controlz for WPF

支援 .NET Framework(4.5.2、4.6.2 及更高版本)、.NET Core (3.1) 和 .NET 5(在 Windows 上)

讓我們開始吧

TextBoxInputMaskBehavior

TextBoxInputMaskBehavior 可用於顯示文字方塊內的遮罩。

注意:它只是一個遮罩,不會驗證您的文字。

<TextBlock Grid.Row="0" Grid.Column="0" Margin="4" Text="Datetime" />
<TextBox Grid.Row="0" Grid.Column="1" Margin="4">
  <behaviors:Interaction.Behaviors>
    <controlzEx:TextBoxInputMaskBehavior InputMask="00/00/0000" />
  </behaviors:Interaction.Behaviors>
</TextBox>

<TextBlock Grid.Row="1" Grid.Column="0" Margin="4" Text="Phone Number" />
<TextBox Grid.Row="1" Grid.Column="1" Margin="4">
  <behaviors:Interaction.Behaviors>
    <controlzEx:TextBoxInputMaskBehavior
      InputMask="( 999 ) 000 000 - 00"
      PromptChar="_"
    />
  </behaviors:Interaction.Behaviors>
</TextBox>

原始的 TextBoxInputMaskBehavior 取自 Blindmeis 的部落格。

KeyboardNavigationEx

KeyboardNavigationEx 是一個常見焦點問題的輔助類別。UI 元素本身的焦點不是問題。但是如果我們使用常見的聚焦方法,控制項獲得了焦點,但沒有獲得焦點視覺樣式。

僅當控制項從鍵盤裝置獲得焦點或 SystemParameters.KeyboardCues 為 true 時,原 KeyboardNavigation 類別才處理視覺樣式。

使用 KeyboardNavigationEx,您可以透過兩種簡單的方式解決此問題。

後置程式碼:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += (s, e) => { KeyboardNavigationEx.Focus(this.TheElementWhichShouldGetTheFocus); };
    }
}

或在 XAML 中:

<button controlzex:KeyboardNavigationEx.AlwaysShowFocusVisual="True">
  Hey, I get the focus visual style on mouse click!
</button>

自動移動 ToolTip

一個自動移動的 ToolTip。更多資訊

<button
  Margin="5"
  Padding="5"
  Content="Test Button 2"
  ToolTipService.ShowDuration="20000"
>
  <Button.ToolTip>
    <ToolTip local:ToolTipAssist.AutoMove="True">
      <ToolTip.Template>
        <ControlTemplate>
          <Grid>
            <Border
              Background="Gray"
              BorderBrush="Black"
              BorderThickness="1"
              Opacity="0.9"
              SnapsToDevicePixels="True"
            />
            <TextBlock
              Margin="5"
              Foreground="WhiteSmoke"
              FontSize="22"
              Text="ToolTipHelper AutoMove sample"
              TextOptions.TextFormattingMode="Display"
              TextOptions.TextRenderingMode="ClearType"
            />
          </Grid>
        </ControlTemplate>
      </ToolTip.Template>
    </ToolTip>
  </Button.ToolTip>
</button>

GlowWindowBehavior

GlowWindowBehavior 在視窗周圍加入光暈。

WindowChromeBehavior

ControlzEx 為 WPF 視窗提供了自訂邊框,並為其提供了一些其他更深層次的修復。

大多數修復和改進來自 MahApps.MetroFluent.Ribbon

具體的技術實作描述在這裡:

http://blogs.msdn.com/b/wpfsdk/archive/2008/09/08/custom-window-chrome-in-wpf.aspx

它是原始 Microsoft WPF Shell 整合庫的一個分支。目前的 Microsoft 實作可以在這裡找到:

PopupEx

自訂的 Popup 視窗,可用於驗證錯誤範本或其他類似 MaterialDesignInXamlToolkitMahApps.Metro 中的其他內容。

PopupEx 提供了一些額外的不錯功能:

  • 如果主機視窗大小或位置發生變化,則重新定位
  • 如果主機視窗最大化,則重新定位,反之亦然
  • 如果主機視窗被啟動,它只能是最上層

TabControlEx

自訂 TabControl,在取消選取時將 TabItem 內容保留在 VisualTree 中,因此在再次選取 TabItem 後不會重新建立。可見性行為可以透過 ChildContentVisibility 相依性屬性設定。

用法:

<controlz:TabControlEx>
  <TabItem Header="Lorem">
    <TextBlock
      Text="Lorem ipsum dolor sit amet, consetetur sadipscing"
      HorizontalAlignment="Center"
      FontSize="30"
    />
  </TabItem>
  <TabItem Header="ipsum">
    <TextBox
      Text="Lorem ipsum dolor sit amet, consetetur sadipscing"
      HorizontalAlignment="Center"
      Margin="5"
    />
  </TabItem>
</controlz:TabControlEx>

PackIconBase

一個用於在 WPF 中建立圖示套件的協助類別。

要建立新的圖示套件,請按照下列步驟操作:

定義一個鍵(通常是一個列舉):

public enum PackIconKind
{
    Happy,
    Sad
}

子類別 PackIconBase,加入

  • 預設 style key
  • 為每個 key 提供 Path 資料的工廠
public class PackIcon : PackIconBase<PackIconKind>
{
    static PackIcon()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(PackIcon), new FrameworkPropertyMetadata(typeof(PackIcon)));
    }

    public PackIcon() : base(CreateIconData)
    { }

    private static IDictionary<PackIconKind, string> CreateIconData()
    {
        return new Dictionary<PackIconKind, string>
        {
            {PackIconKind.Happy, "M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"},
            {PackIconKind.Sad, "M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z"}
        };
    }
}

提供預設樣式(通常在您的 Generic.xaml 中,例如:

<style TargetType="{x:Type local:PackIcon}">
  <Setter Property="Height" Value="16" />
  <Setter Property="Width" Value="16" />
  <Setter Property="HorizontalAlignment" Value="Left" />
  <Setter Property="VerticalAlignment" Value="Top" />
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:PackIcon}">
              <Viewbox>
                  <Canvas Width="24" Height="24">
                      <Path Data="{Binding Data, RelativeSource={RelativeSource TemplatedParent}}"
                            Fill="{TemplateBinding Foreground}" />
                  </Canvas>
              </Viewbox>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</style>

您的使用者現在應該可以透過一種簡單的方式在他們的應用程式中使用您的圖示套件:

<ns:PackIcon Kind="HappyIcon" />

Theming

ControlzEx 提供 ThemeManager 幫助您為應用程式提供主題管理支援。有關更多資訊,請參閱該節

Licence

MIT

繼續探索

延伸閱讀

更多文章
同分類 / 同標籤 2025/1/26

WPF 藉助自訂 XML 檔案實現國際化

本文詳細介紹了在WPF程式中使用自訂XML檔案實現國際化的方法,包括安裝必備NuGet套件、動態獲取語言清單、動態切換語言、在程式碼和XAML介面中使用翻譯字串等內容,同時提供了原始碼連結,幫助開發者輕鬆實現WPF應用程式的國際化。

繼續閱讀