视觉报告进展

Question

所以基本上我想要一个控件，我在其中动态添加新行，其中每一行代表我正在做的操作。为此，我创建了一个像这样的文本框：

<TextBox Grid.Row="1" Text="{Binding CurrRow}" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible"  AcceptsReturn="True"/>

我在视图模型中更新了CurrRow属性，如下所示：

for (index = 0; index < 100; index++)
{
    CurrRow = CurrRow + index.ToString();
    //various operation
    CurrRow = CurrRow + Environment.NewLine;
}

这些只是提供这个想法的一个例子。输出是我的预期。但是我想要更少的东西＆＃34;静态＆＃34;从视觉角度来看。例如，我想添加动画＆＃34; ...＆＃34;在表示当前正在工作的操作的行内，并且我不知道TextBox是否在此上下文中是正确的选择。所以我的问题是：我如何制作一个＆＃34;报告查看器＆＃34;在WPF？

Answer 1

这是一个使用我个人推荐的几个库的MVVM示例：

查看模板（仅限Xaml）：

<Window
    x:Class="Sandbox.Test"
    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:local="clr-namespace:Sandbox"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="Test"
    mc:Ignorable="d">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ProgressBar.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ListBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0">
            <ItemsControl
                MaxWidth="300"
                Margin="16,8"
                ItemsSource="{Binding LongTasks}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding}">
                            <ContentControl.Style>

                                <Style TargetType="{x:Type ContentControl}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsFinished}" Value="False">
                                            <DataTrigger.Setters>
                                                <Setter Property="ContentTemplate">
                                                    <Setter.Value>
                                                        <DataTemplate>
                                                            <DockPanel Margin="12">
                                                                <ProgressBar
                                                                    HorizontalAlignment="Center"
                                                                    VerticalAlignment="Center"
                                                                    DockPanel.Dock="Right"
                                                                    Style="{StaticResource MaterialDesignCircularProgressBar}"
                                                                    Value="{Binding Progress}" />
                                                                <TextBlock
                                                                    VerticalAlignment="Center"
                                                                    Style="{StaticResource MaterialDesignDisplay1TextBlock}"
                                                                    Text="Task running" />
                                                            </DockPanel>
                                                        </DataTemplate>

                                                    </Setter.Value>
                                                </Setter>
                                            </DataTrigger.Setters>
                                        </DataTrigger>
                                    </Style.Triggers>
                                    <Setter Property="ContentTemplate">
                                        <Setter.Value>
                                            <DataTemplate>
                                                <TextBlock
                                                    Margin="12"
                                                    VerticalAlignment="Center"
                                                    Style="{StaticResource MaterialDesignDisplay1TextBlock}"
                                                    Text="Task finished" />
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ContentControl.Style>
                        </ContentControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </ScrollViewer>
        <Button
            Grid.Row="1"
            Margin="12"
            HorizontalAlignment="Right"
            Command="{Binding AddLongTask}"
            Content="{materialDesign:PackIcon Kind=Plus,
                                              Size=32}"
            Style="{StaticResource MaterialDesignFloatingActionButton}" />
    </Grid>
</Window>

```

您似乎想要的关键点是使用DataTrigger根据您的条件更改ContentControl的{​​{1}}，以便您可以显示完全不同的内容。

ViewModel在后台模拟长期任务：

ContentTemplate

我使用Rx.NET处理异步通知（此处为进度仿真）和MaterialDesignInXamlToolkit处理全局样式