Wie wird der Rahmen und der Hintergrund einer Textbox in einer Universal Windows 10 App angepasst?

Question

Ich entwickle eine universelle Windows 10 App. Ich möchte ein Textfeld anpassen, um den Standardrahmen, Hover und Hintergrund zu entfernen.

Mein Problem ist, dass ich nicht weiß, wie auf der universellen Windows-Plattform anpassen. Hier

ist der Code, den ich verwende:

<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> 

Hier ist ein Screenshot von meinem UI Problem:

Wenn ich den Mauszeiger über ein Textfeld setzen, es ändert sich die Grenze und der Hintergrund.

Answer 1

TextBox anzupassen, können wir TextBox styles and templates bearbeiten.

Erstens können wir "Document Outline" in Visual Studio durch offene "Ansicht" → "Andere Fenster" → "Document Outline" öffnen.

dann in „Document Outline“ wählen Sie die TextBox wir zum Beispiel ändern möchten, wählen Sie „Username“ und der rechten Maustaste und wählen Sie dann „Vorlage bearbeiten“ → „Kopie bearbeiten ... ".

Dies wird ein "Create Style Resource" Dialog öffnen. Und standardmäßig wird es den Standardstil unter Page.Resources wie erzeugen:

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

Danach wir den Stil und die Vorlage bearbeiten können zu erreichen, was wir wollen.

Der Hover-Stil wird in "PointerOver"VisualState definiert.

<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> 

Und die "Focused" Visual ist das gleiche:

<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> 

auf den Standard Grenz-und Hintergrund zu entfernen, können wir die Animation Ziel BorderBrush und Background wie einfach löschen.

Neben der Standardvorlage bilden, können Sie TextBox finden hat sich bereits Border drin.

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

So können wir nur hinzufügen CornerRadius="10" in diesem Border:

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

Und dann diese neue Art verwenden in TextBox ohne zusätzliche Border wie:

<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> 

Wenn Sie diese anwenden möchten Stil zu allen TextBox s in der Page, können Sie x:Key="TextBoxStyle1" in entfernen die Style und nicht setzen die Style Eigenschaft TextBox:

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

Damit wird der Stil auf alle TextBox s im Page automatisch anzuwenden.