2016-11-15 57 views
0

我想創建一個自定義的文本框是這樣的:UWP - 我如何能實現完全自定義的文本框

enter image description here

我知道我能做到大部分與編輯模板和樣式,但我想能夠從XAML獲得符號價值是這樣的:

<TextBoxWithSymbol FontSize="..." FontFamily="..." PlaceholderText="Write something here..." SymbolCode="&#xE102;" /> 

如果我使用一個用戶控件,我想我應該實現許多文本框的屬性,也沒有辦法從文本框本身在用戶控件繼承。

有什麼建議嗎?

P.S:

我一樣@Bart說,但是當我用我的控制XAML頁面,它顯示像正常的TextBox。下面是從代碼Generic.xaml:

<Style TargetType="local:TextBoxWithSymbol" > 
     <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/> 
     <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/> 
     <Setter Property="Foreground" Value="{Binding FallbackValue=Gray}"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/> 
     <Setter Property="BorderBrush" Value="{Binding FallbackValue=DarkGray}" /> 
     <Setter Property="BorderThickness" Value="0,0,0,1"/> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
     <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/> 
     <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/> 
     <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:TextBoxWithSymbol"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="Auto"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding FallbackValue=Gray}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,2" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,-1" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding FallbackValue=LightGreen}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding FallbackValue=Gray}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Light"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1" Grid.RowSpan="1"/> 
         <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/> 
         <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/> 
         <ContentControl VerticalAlignment="Center" x:Name="PlaceholderTextContentPresenter" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="5,0,0,0" Grid.Row="1"/> 
         <TextBlock x:Name="SymbolElement" Grid.Column="1" Grid.Row="1" Text="{TemplateBinding SymbolText}" FontFamily="{TemplateBinding SymbolFontFamily}" FontSize="{TemplateBinding SymbolFontSize}" Margin="12,0,0,0" VerticalAlignment="Center" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

而且TextBoxWithSymbol.cs:

public FontFamily SymbolFontFamily 
     { 
      get { return (FontFamily)GetValue(SymbolFontFamilyProperty); } 
      set { SetValue(SymbolFontFamilyProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for SymbolCode. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty SymbolFontFamilyProperty = 
      DependencyProperty.Register("SymbolFontFamily", typeof(FontFamily), typeof(TextBoxWithSymbol), new PropertyMetadata(new FontFamily("Segoe MDL2 Assets"), SymbolFontFamilyPropertyChanged)); 

     private static void SymbolFontFamilyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
     { 
      var owner = d as TextBoxWithSymbol; 
     } 

     public string SymbolText 
     { 
      get { return (string)GetValue(SymbolTextProperty); } 
      set { SetValue(SymbolTextProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for SymbolCode. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty SymbolTextProperty = 
      DependencyProperty.Register("SymbolText", typeof(string), typeof(TextBoxWithSymbol), new PropertyMetadata("\uE001", SymbolTextPropertyChanged)); 

     private static void SymbolTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
     { 
      var owner = d as TextBoxWithSymbol; 
     } 



     public double SymbolFontSize 
     { 
      get { return (double)GetValue(SymbolFontSizeProperty); } 
      set { SetValue(SymbolFontSizeProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for SymbolFontSize. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty SymbolFontSizeProperty = 
      DependencyProperty.Register("SymbolFontSize", typeof(double), typeof(TextBoxWithSymbol), new PropertyMetadata(20, SymbolFontSizePropertyChanged)); 

     private static void SymbolFontSizePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
     { 
      var owner = d as TextBoxWithSymbol; 
     } 

PS:

它,當我運行的應用程序的工作原理,但在設計時我做不到看看我的控件是什麼樣的(我的意思是像MainPage.xaml這樣的頁面)。有什麼方法可以讓設計時間延長?

+1

'