WPF TextBox 워 터 마크 효과 제작 방법 상세 설명

독선 적 인 방식
원래 간단하게 워 터 마크 효 과 를 만 들 려 고 했 는데 텍스트 상자 의 내용 이 비어 있 을 때 사용자 에 게 입력 을 알려 주 는 것 이 흔 합 니 다.인터넷 검색 만 해도 xaml 코드 를 잃 어 버 렸 어 요.c\#코드 로 이 루어 지 는 건 경향 이 없어 요.일단 내 가 생각 한 건 템 플 릿 이 잖 아.제 가 생각 한 것 은 border 에 textblock 을 끼 워 서 텍스트 내용 을 template Binding 을 통 해 Text 로 바 꾸 는 것 입 니 다.그리고 제 가 원 하 는 효 과 를 얻 었 습 니 다.

<TextBox>
  <TextBox.Template>
    <ControlTemplate TargetType="TextBox">
      <Border BorderThickness="1" Name="border" BorderBrush="Red">
        <TextBlock Text="{TemplateBinding Text}"></TextBlock>
      </Border>
      <ControlTemplate.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="Text" Value=""></Condition>
          </MultiTrigger.Conditions>
          <Setter Property="Background" TargetName="border">
            <Setter.Value>
              <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None">
                <VisualBrush.Visual>
                  <TextBlock Width="500" Height="100" Background="#FFE8DBDB">     22</TextBlock>
                </VisualBrush.Visual>
              </VisualBrush>
            </Setter.Value>
          </Setter>
        </MultiTrigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </TextBox.Template>
</TextBox>

마지막 으로 컵 구 를 자세히 보 니 텍스트 내용 이 입력 되 었 을 때 커서 가 없 었 다.그리고 내 가 생각 한 것 은 템 플 릿 에 있 는 textblock 을 textbox 로 바 꾸 면 끝 이 잖 아.자,컵 에 워 터 마크 효과 가 있 습 니 다.결국 잘 못 했 어.
TextBox 가 가지 고 있 는 템 플 릿 을 변경 하여 효 과 를 얻 으 려 고 시도 합 니 다.
시스템 기본 textBox 의 템 플 릿 visualTree 를 내 보 냅 니 다.시 도 를 통 해 성공 적 으로 효 과 를 얻 었 습 니 다.특히 인터넷 에 있 는 사람들 이 많이 붙 인 xaml 코드 안에 scrollviewer 가 들 어 있 고 정확하게 작 동 할 수 있어 서 이해 하기 어렵 습 니 다.원래 시스템 이 묵인 한 것 은 scrollviewer 입 니 다.그 렇 군요.그리고 Name=PARTContentHost  그 가 쓰 면 자 연 스 럽 게 당초 내용 의 숙주 에 의 해 처 리 될 수 있다.보아하니 PARTContentHost  아주 특별한 시스템 이름 입 니 다.그리고 여러 줄 의 텍스트 상 자 는 Accepts Return="True"Vertical Scrollbar Visibility="Auto"속성 을 설정 하여 다음 과 같 습 니 다.

<TextBox Text="" Height="60" Name="nihao" Width="300" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" >
  <TextBox.Template>
    <ControlTemplate TargetType="TextBox">
      <!--      PART_ContentHost                  
                           scrollviewer                      
                        visualtree     。  decorator  scrollviewer      PART_ContentHost
            -->
      <Border Name="borderContent" CornerRadius="10 0 0 10" BorderThickness="1" BorderBrush="Blue" Background="#FFE8DBDB" SnapsToDevicePixels="True">
        <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Name="PART_ContentHost" Focusable="False"/>
      </Border>
      <ControlTemplate.Triggers>
        <MultiTrigger >
          <MultiTrigger.Conditions>
            <Condition Property="IsFocused" Value="False"/>
            <Condition Property="Text" Value=""/>
          </MultiTrigger.Conditions>
          <Setter Property="Background" TargetName="borderContent" >
            <Setter.Value>
              <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None">
                <VisualBrush.Visual>
                  <!--                                         
                        {Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Width}
                        -->
                  <TextBlock Width="500" Height="100" Background="#FFE8DBDB">     </TextBlock>
                </VisualBrush.Visual>
              </VisualBrush>
            </Setter.Value>
          </Setter>
        </MultiTrigger>
        <Trigger Property="IsFocused" Value="True">
          <Setter Property="Background" TargetName="borderContent" Value="#FFE8DBDB"></Setter>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </TextBox.Template>
</TextBox>

다른 방식:
또 다른 방법 은 외곽 을 직접 제어 하 는 style trigger 도 효 과 를 얻 을 수 있 습 니 다.다만 원 각 border 는 text 컨트롤 외 에 border 를 추가 해 야 실현 할 수 있 습 니 다.

<TextBox Text="" Height="30" BorderThickness="1" BorderBrush="Blue" Margin="10">
  <TextBox.Style>
    <Style TargetType="TextBox">
      <!--            background         ，           -->
      <Setter Property="Background" Value="#FFE8DBDB"></Setter>
      <Style.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="Text" Value="" ></Condition>
          </MultiTrigger.Conditions>
          <Setter Property="Background" >
            <Setter.Value>
              <VisualBrush AlignmentX="Left" AlignmentY="Top" Stretch="None" >
                <VisualBrush.Visual >
                  <Border Background="#FFE8DBDB" Width="500" Height="100">
                    <TextBlock >     </TextBlock>
                  </Border>
                </VisualBrush.Visual>
              </VisualBrush>
            </Setter.Value>
          </Setter>
        </MultiTrigger>
      </Style.Triggers>
    </Style>
  </TextBox.Style>
</TextBox>

최종 효과:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.