当新行添加到 XAML 中的 TextBlock 时，将 ScrollViewer 滚动到 WPF 中的底部

Question

我试图将垂直滚动条保持在底部（最新条目），但目前，滚动条只停留在同一个位置，因此当内容被添加到字符串时，滚动条移动到顶部。

我知道我可以在我的代码隐藏中使用 ServerScroll.ScrollToEnd() 属性将栏移到最后。但是有没有办法自动做到这一点 xaml？（这样我就不必在每次添加到字符串时都调用它属性）。

XAML

<ScrollViewer Name="ServerScroll"
              VerticalScrollBarVisibility="Auto">
    <TextBlock Name="serverConsole"
               Margin="5"
               Background="White"
               TextWrapping="Wrap"/>
</ScrollViewer>

代码隐藏

private void example_Click(object sender, RoutedEventArgs e)
{
    ServerConsole += "asdf\r\n";      // binded to TextBlock
    ServerScroll.ScrollToEnd();    
}

Answer 1

使用文本框，响应 TextBox.TextChanged

如果您想在每次更改 TextBlock 的 Text 属性时滚动到末尾，我建议您切换到 TextBox，这样您就可以使用 System.Windows.Interactivity:

连接到其 TextChanged 事件

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Width="50" Height="25" Click="Button_Click"></Button>
        <ScrollViewer Grid.Row="1" Name="ServerScroll"
                      VerticalScrollBarVisibility="Auto">
            <TextBox Name="serverConsole"
                       Margin="5"
                       Background="White"
                       TextWrapping="Wrap">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="TextChanged">
                        <ei:CallMethodAction MethodName="ScrollToEnd" TargetObject="{Binding ElementName=ServerScroll}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </TextBox>
        </ScrollViewer>
    </Grid>
</Window>

使用 TextBlock，响应 Button.Click

如果您希望在单击 Button 时滚动到末尾，您可以使用相同的技术连接到它的 Click 事件：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Width="50" Height="25" Click="Button_Click">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:CallMethodAction MethodName="ScrollToEnd" TargetObject="{Binding ElementName=ServerScroll}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <ScrollViewer Grid.Row="1" Name="ServerScroll"
                      VerticalScrollBarVisibility="Auto">
            <TextBlock Name="serverConsole"
                       Margin="5"
                       Background="White"
                       TextWrapping="Wrap">
            </TextBlock>
        </ScrollViewer>
    </Grid>
</Window>

使用 ListView，响应 CollectionChanged

看起来你真的想使用 ItemsControl 而不是 TextBlock，因为你在谈论条目和所有内容。您也可以切换到 ListView 并连接到它的 CollectionChanged 事件：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Width="50" Height="25" Click="Button_Click"/>

        <ScrollViewer Grid.Row="1" Name="ServerScroll"
                      VerticalScrollBarVisibility="Auto">
            <ListView x:Name="listView" ItemsSource="{Binding MyList}">
                <i:Interaction.Triggers>
                    <i:EventTrigger SourceObject="{Binding MyList}" EventName="CollectionChanged">
                        <ei:CallMethodAction MethodName="ScrollToEnd" TargetObject="{Binding ElementName=ServerScroll}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </ListView>
        </ScrollViewer>
    </Grid>
</Window>

并且在您的视图模型中：

public ObservableCollection<string> MyList { get; } = new ObservableCollection<string>();

当新行添加到 XAML 中的 TextBlock 时，将 ScrollViewer 滚动到 WPF 中的底部

Scrolling a ScrollViewer to the bottom in WPF when a new line is added to a TextBlock in XAML

c#

wpf

eventtrigger

scrollviewer