ユニバーサルWindows 10アプリケーションでテキストボックスの枠線と背景をカスタマイズする方法は？

Question

私は普遍的なWindows 10アプリを開発しています。私はデフォルトの境界線のホバーと背景を削除するためにテキストボックスをカスタマイズしたいと思います。

私の問題は、ユニバーサルWindowsプラットフォームでカスタマイズする方法がわかりません。

は、ここで私が使用していたコードされています

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <!--layoutroot where all page content is placed--> 
    <Grid x:Name="layoutRoot" Background="#1BA1E2"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <StackPanel Grid.Row="0" Margin="12,0,12,0"> 
      <!--Title Page--> 
      <TextBlock Text="Login Here" Foreground="White" FontSize="40" Padding="60,80,60,80"/> 

      <!--username--> 
      <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5"> 
       <TextBox PlaceholderText="Username" Name="Username" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Username_GotFocus"/> 
      </Border> 
      <!--Password--> 
      <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5"> 
       <TextBox PlaceholderText="Password" Name="Password" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Password_GotFocus"/> 
      </Border> 

      <!--Button login--> 
      <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5"> 
       <TextBlock Text="Log In" Foreground="White" Margin="0" Padding="200,5,0,5"/> 
      </Border> 

     </StackPanel><!--end StackPanel--> 
    </Grid><!--end Grid layoutRoot--> 
</Grid> 

をここでは私のUIの問題のスクリーンショットです：

私はテキストボックスの上にマウスポインタを置くと、それは変わります国境と背景。

Answer 1

TextBoxをカスタマイズするには、我々はTextBox styles and templatesを編集することができます。

まず、我々はオープン "表示" → "その他のWindows" → "ドキュメントアウトライン"すると、Visual Studioで"ドキュメントアウトライン"を開くことができます。

はその後 「ドキュメントアウトライン」に→「コピーを編集し、その後 「テンプレートの編集」を選択し、「ユーザー名」を選択して右クリックし、例えば、我々は変更するのTextBoxを選択します... "。

「スタイルリソースの作成」ダイアログがポップアップ表示されます。この後、我々は我々が望むものを達成するために、スタイルやテンプレートを編集することができ

<Page.Resources> 
    <Style x:Key="TextBoxStyle1" TargetType="TextBox"> 
    ... 
    </Style> 
</Page.Resources> 

：そしてデフォルトでは次のようにPage.Resourcesの下で、デフォルトのスタイルを生成します。

ホバースタイルは、"PointerOver"VisualStateで定義されています。

<VisualState x:Name="PointerOver"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/> 
     </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> 

デフォルトの境界線と背景を削除するには、我々は同じように、アニメーションのターゲットBorderBrushとBackgroundを削除することができます。

<VisualState x:Name="PointerOver"> 
    <Storyboard> 
     <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" /> 
     </ObjectAnimationUsingKeyFrames>--> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" /> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

そして「集束」 visualSTATEのは同じです。

以外にも、あなたがのTextBoxはすでにそれにボーダーを持っていた見つけることができ、デフォルトのテンプレートを形成します。

<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" `CornerRadius="10"`/> 

をそして同様に、追加のBorderなしTextBoxにこの新しいスタイルを使用します：

<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/> 

だから我々はちょうどこのBorderでCornerRadius="10"を追加することができますが、これを適用する場合

<StackPanel Grid.Row="0" Margin="12,0,12,0"> 
    <!-- Title Page --> 
    <TextBlock FontSize="40" Foreground="White" Padding="60,80,60,80" Text="Login Here" /> 

    <!-- username --> 
    <TextBox Name="Username" Margin="5" Background="Transparent" BorderBrush="White" GotFocus="Username_GotFocus" PlaceholderText="Username" Style="{StaticResource TextBoxStyle1}" /> 
... 
</StackPanel> 

スタイルはPageのTextBoxのすべてに、x:Key="TextBoxStyle1"を削除できますStyleとTextBoxのStyleプロパティを設定しないでください。これにより

<Page.Resources> 
    <Style TargetType="TextBox"> 
    ... 
    </Style> 
</Page.Resources> 

を、スタイルが自動的にPage内のすべてのTextBox Sに適用されます。