模仿 HTML 控制台的 WPF 控件

Question

我猜没有一个控件可以自动执行此操作，但我正在寻找一种在 wpf 应用程序中实现类似功能的方法。这就是我希望它做的事情。

• 像 cli 一样将命令输入其中（这可能是一个单独的文本框 如有必要）。
• 输出普通文本并支持 HTML 颜色。
• 每个命令后光标向下移动时向上滚动的历史记录。
• HTML 格式的 div、表格和文本格式（无需 js）
• 不大于 100x100 的小图片

我如何开始制作这个？我是否从 StackPanel 开始？

Answer 1

I Added two rows with four colomns in a grid panel
In the first row fourth colomn add a stackpanel for normal text

Out side the grid you also add image as well as inside 
That I include for your reference

The grid is nested in the scroll


<Window x:Class="Wpftest.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:local="clr-namespace:Wpftest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <ScrollViewer Margin="5" CanContentScroll="False"
              HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Image Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />

            <Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>
            <StackPanel Grid.Row="0" Grid.Column="4">

                <TextBlock FontSize="15">Your Normal text</TextBlock>

            </StackPanel>
            <Button Grid.Row="1" Content="Learn"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                Padding="10,5"/>
            <Button Grid.Row="1" Grid.Column="2" Content="Learn"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                Padding="10,5"/>
            <Button Grid.Row="1" Grid.Column="4" Content="Inputs"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                Padding="10,5"/>
        </Grid>
    </ScrollViewer>
</Window>