Control Template Issues WPF

• Question

• 

  

  0

  Sign in to vote

  Hi!, I'm completly new in WPF and I'm learning how to use a ControlTemplate.

  by the way sorry if this is not the correct Forum category, I didn't find a WPF category

  I've been creating a new textbox tamplate:

  <Style TargetType="TextBox" x:Key="WaterMark">
          <Setter Property="FontSize" Value="12"/>
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="TextBox">
                      <Grid >
                          <TextBlock Margin="0,12,0,0" Text="User" FontSize="12" >
                              <TextBlock.Style>
                                  <Style TargetType="TextBlock">
                                      <Style.Triggers>
                                          <DataTrigger Value="true">
                                             
                                              <DataTrigger.Binding>
                                                  <MultiBinding Converter="{StaticResource InputToSize}">
                                                      <Binding ElementName="inputText" Path="Text.IsEmpty"/>
                                                      <Binding ElementName="inputText" Path="IsFocused"/>
                                                  </MultiBinding>
                                              </DataTrigger.Binding>
                                              
                                              <DataTrigger.EnterActions>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:1">
                                                          <DoubleAnimation From="12" To="8" Storyboard.TargetProperty="FontSize"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:1">
                                                          <ThicknessAnimation From="0,12,0,0" To="0" Storyboard.TargetProperty="Margin"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                              </DataTrigger.EnterActions>
                                              <DataTrigger.ExitActions>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:1">
                                                          <DoubleAnimation From="8" To="12" Storyboard.TargetProperty="FontSize"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:1">
                                                          <ThicknessAnimation From="0" To="0,12,0,0" Storyboard.TargetProperty="Margin"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                              </DataTrigger.ExitActions>
                                          </DataTrigger>
                                      </Style.Triggers>
                                  </Style>
                              </TextBlock.Style>
                              <TextBlock.Foreground>
                                  <SolidColorBrush Color="Gray"/>
                              </TextBlock.Foreground>
                          </TextBlock>
                          <TextBox Margin="0,12,0,0" Text ="{Binding RelativeSource = {RelativeSource TemplatedParent}, Mode=TwoWay , Path=Text}" BorderThickness="0" Name="inputText" Background="Transparent"/>
                          <Rectangle Fill="Gray"  Width="{TemplateBinding Width}" Height="1" VerticalAlignment="Bottom"/>
                          <Rectangle Fill="#FF2281D1"  Width="{TemplateBinding Width}" Height="2" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                              <Rectangle.Style>
                                  <Style TargetType="Rectangle">
                                      <Style.Triggers>
                                          <DataTrigger Binding="{Binding ElementName=inputText, Path=IsFocused}" Value="true">
                                              <DataTrigger.EnterActions>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:01">
                                                          <DoubleAnimation From="0" To="500" Storyboard.TargetProperty="Width"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                              </DataTrigger.EnterActions>
                                              <DataTrigger.ExitActions>
                                                  <BeginStoryboard>
                                                      <Storyboard Duration="00:00:01">
                                                          <DoubleAnimation From="500" To="0" Storyboard.TargetProperty="Width"/>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                              </DataTrigger.ExitActions>
                                          </DataTrigger>
                                      </Style.Triggers>
                                  </Style>
                              </Rectangle.Style>
                          </Rectangle>
  
                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
      </Style>

  
  

  but I've 3 mainly issues:

  1: When I use a duration of 00:00:0.5 in any storyboard, The animation never concludes, always ends in half way, I don't know if there is a way to do this, because I want a faster animation than 1 second.
  
  2:I've render issues with a rectangle, I draw a rectangle over other one (Blue over a Gray one), and when the control is not focused the top rectangle(I'm gonna call it Blue rectangle) has an animation to dessapear. but when blue rectangle's width reach 0, the rectangle on the bottom has a weird appereance, I don't know if I have to redraw the control or something like that.

  

  3: I want change the "blue" rectangle width with an animation (already done), but I want that goes for example From = "0", To="TemplateBinding Width", In order to reach always all the control width. but, this throw me an error.

  Someone can help me in how to fix this issues, and if you have some advices, It would help a lot, due I'm a begginer.

  • Moved by Jack J JunMicrosoft contingent staff Tuesday, August 4, 2020 2:49 AM

  Wednesday, July 29, 2020 11:27 PM