Feedback

C# - Visuelles Feedback fokussierter Text Boxen

Veröffentlicht von am 10/12/2010
(0 Bewertungen)
Mithilfe dieses Snippets ist es möglich die fokussierten Textboxen in einer Maske eindeutig zu Kennzeichnen.
Hierzu muss lediglich folgendes Style-Template als Window.Resource festgelegt und der gewünschten TextBox als Style-Resource zugewiesen werden :

XAML-Code
Style x:Key="TextBoxStyleSilverWhite" TargetType="TextBox">
Setter Property="Foreground" Value="Black"/>
Setter Property="Background" Value="Gainsboro"/>
Setter Property="FontFamily" Value="Arial"/>
Setter Property="FontSize" Value="12"/>
Setter Property="HorizontalAlignment" Value="Left"/>
Setter Property="VerticalAlignment" Value="Top"/>
Style.Triggers>
Trigger Property="IsMouseOver" Value="True">
Setter Property="BorderBrush" Value="White"/>
/Trigger>
Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Yellow"/>
<Setter Property="BorderThickness" Value="1"/>
/Trigger>
/Style.Triggers>
/Style>

(PS: Die öffnenden Tagbezeichner „<“ fehlen, da sonst eine vernünftige Darstellung auf dieser Webseite nicht möglich ist)

C#-Code
Style = (Style)MasterGrid.FindResource("TextBoxStyleSilverWhite")


Damit entfällt für den Anwender die manchmal doch schon schwierige Suche nach dem fokussierten Textfeld und die häufige Frage "wo befindet sich der Cursor...?"

Screenshot der Beispiel-Anwendung => http://twitpic.com/2wupd6
XAML-Code

<Window x:Class="TextBoxFocus.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title=".Net-Snippets - TextBoxFocus" Height="360" Width="300">
  <Window.Resources>
    <!-- **************************************************************************************** <-->
    <!-- ****************************** Farbverlauf "Hintergrund"  ****************************** <-->
    <!-- **************************************************************************************** <-->
    <LinearGradientBrush x:Key="GridBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
      <GradientStop Offset="0" Color="DimGray" />
      <GradientStop Offset=".59" Color="DarkGray" />
      <GradientStop Offset=".60" Color="DarkGray" />
      <GradientStop Offset="1" Color="DimGray" />
    </LinearGradientBrush>
    <!-- **************************************************************************************** <-->
    <!-- **************************** Template für schwarze Buttons ***************************** <-->
    <!-- **************************************************************************************** <-->
    <ControlTemplate x:Key="BlackButton" TargetType="{x:Type Button}">
      <Border BorderBrush="White" BorderThickness="1" CornerRadius="3">
        <Border BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3">
          <Grid Name="ButtonGrid">
            <Rectangle Name="ButtonRect">
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Offset="0" Color="Gray" />
                  <GradientStop Offset="0.49" Color="DimGray" />
                  <GradientStop Offset="0.5" Color="DimGray" />
                  <GradientStop Offset="1" Color="Black" />
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
          </Grid>
        </Border>
      </Border>
      <ControlTemplate.Triggers>
        <!-- Bei Mausbewegung über den Button ... -->
        <Trigger Property="IsMouseOver" Value="True">
          <!-- Buttonhintergrund heller darstellen -->
          <Setter Property="Fill" TargetName="ButtonRect">
            <Setter.Value>
              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="Silver" />
                <GradientStop Offset="1" Color="Black" />
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
          <!-- Leuchteffekt -->
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" GlowSize="5" />
            </Setter.Value>
          </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="Fill" TargetName="ButtonRect" Value="#FF000000" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
    <!-- **************************************************************************************** <-->
    <!-- ************************* Style-Template für "aktive Textboxen" ************************ <-->
    <!-- **************************************************************************************** <-->
    <Style x:Key="TextBoxStyleSilverWhite" TargetType="TextBox">
      <Setter Property="Foreground" Value="Black"/>
      <Setter Property="Background" Value="Gainsboro"/>
      <Setter Property="FontFamily" Value="Arial"/>
      <Setter Property="FontSize" Value="12"/>
      <Setter Property="HorizontalAlignment" Value="Left"/>
      <Setter Property="VerticalAlignment" Value="Top"/>
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="BorderBrush" Value="White"/>
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
          <Setter Property="Background" Value="White"/>
          <Setter Property="BorderBrush" Value="Yellow"/>
          <Setter Property="BorderThickness" Value="1"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>

  <Grid x:Name="MasterGrid" Background="{StaticResource GridBackgroundBrush}">
      <Button Name="btnClose" Content="Schließen" Margin="0,0,0,15" Width="110" Height="30"
            HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="White" Click="btnClose_Click"
            Template="{DynamicResource BlackButton}" />
  </Grid>
</Window>

C#-Code

    public Window1()
    {
      InitializeComponent();

      for( int i=0; i<10; i++ )
      {
        MasterGrid.Children.Add( new Label()
        {
          Margin = new Thickness( 10, i * 25 + 8, 0, 0 ),
          HorizontalAlignment = HorizontalAlignment.Left,
          VerticalAlignment = VerticalAlignment.Top,
          Content = "Beschreibung Nr. " + (i+1), Foreground = Brushes.White
        } );
        MasterGrid.Children.Add( new TextBox()
        {
          Margin = new Thickness( 130, i * 25 + 10, 0, 0 ),
          Width = 140, Height = 20, TabIndex = i+1,
          Style = (Style)MasterGrid.FindResource("TextBoxStyleSilverWhite"),
          Text = "TextBox Nr. " + (i+1)
        } );
      }
Abgelegt unter GUI, XAML, WPF, TextBox, Control, Style, Styles, Triggers, Textfelder.

Kommentare zum Snippet

 

Logge dich ein, um hier zu kommentieren!