简体   繁体   中英

Auto scrolling on TextBox ControlTemplate

I'm using the TextBox below, which in order to apply a DropShadowEffect on its text, uses a ControlTemplate. I managed to get the TextWrapping to work, but once the TextBox fills up, it's content goes out of view. How do I replicate the Auto scrolling to the bottom feature of a native TextBox?

<TextBox TextWrapping="Wrap"
           Foreground="LimeGreen"
           Background="Black"
           Margin="10,40,10,40"
           FontSize="40"
           HorizontalAlignment="Stretch"
           x:Name="Inp"
           FontFamily="Courier New"
           CaretBrush='LimeGreen'>
    <TextBox.Resources>
      <Style TargetType="{x:Type TextBox}">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="TextBox">
              <Grid x:Name="RootElement">
                <ScrollViewer>
                <ContentPresenter Content="{TemplateBinding Text}">
                  <ContentPresenter.Effect>
                    <DropShadowEffect ShadowDepth="4"
                                      Direction="330"
                                      Color="LimeGreen"
                                      Opacity="1"
                                      BlurRadius="5" />
                  </ContentPresenter.Effect>
                  <ContentPresenter.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                      <Setter Property='TextWrapping'
                              Value='Wrap' />
                    </Style>
                  </ContentPresenter.Resources>
                </ContentPresenter>
                </ScrollViewer>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </TextBox.Resources>
  </TextBox>

This solution is a bit different that what you might expect. I think using the ContentPresenter is the wrong way because in the end you still want the functionality of the TextBox. So my solution focuses on getting rid of the border and focus indicator that mess up the drop shadow effect:

<TextBox x:Name="Inp"
            Height="100"
            HorizontalAlignment="Stretch"
            Background="Transparent"
            BorderBrush="Transparent"
            BorderThickness="0"
            CaretBrush="LimeGreen"
            FontFamily="Courier New"
            FontSize="40"
            Foreground="LimeGreen"
            TextWrapping="Wrap">
    <TextBox.Effect>
        <DropShadowEffect BlurRadius="5"
                            Direction="330"
                            Opacity="1"
                            ShadowDepth="4"
                            Color="LimeGreen" />
    </TextBox.Effect>
    <TextBox.FocusVisualStyle>
        <Style>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate/>
                </Setter.Value>
            </Setter>
        </Style>
    </TextBox.FocusVisualStyle>
</TextBox>

I set the Background, BorderBrush to be transparent (=> no shadow). I removed the ContentPresenter; it's a 'regular textbox now. And to remove the focus border I set the FocusVisualStyle to an empty Template.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM