C# WPF XAML 小地图答案

【问题标题】：C# WPF XAML MinimapC# WPF XAML 小地图
【发布时间】：2020-05-11 23:16:11
【问题描述】：

如何在 Visual Studio Code、Visual Studio、Sublime Text 中构建小地图？

我有 2 个水平的 StackPanel。

顶部：带有内容的 StackPanel

底部：高度为 100 的 Minimap StackPanel 仅以缩影形式显示顶部 StackPanel 中的内容，而不添加顶部 StackPanel 中的相同内容。

<Grid>

    <ScrollViewer
        x:Name="scrollViewer"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Disabled">
        <WrapPanel
            x:Name="wrapPanel"
            Orientation="Horizontal"
            Margin="0,0,0,100" />
    </ScrollViewer>

    <ScrollViewer
        x:Name="scrollViewerMiniMap"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollBarVisibility="Disabled"
        VerticalAlignment="Bottom"
        Height="100">
        <WrapPanel
            x:Name="wrapPanelMiniMap"
            Orientation="Horizontal" />
    </ScrollViewer>

</Grid>

我怎样才能做到这一点？

【问题讨论】：

用 VisualBrush 填充一个矩形。
只需从内容中创建一个VisualBrush，例如使用内容的根容器。覆盖 ScrollViewer 的默认样式以使用 VisualBrush 绘制轨道的背景。

标签： c# wpf xaml

【解决方案1】：

只需从内容创建一个VisualBrush，例如使用内容的根容器。覆盖ScrollViewer 的默认样式以使用VisualBrush 绘制轨道的背景。

要创建简单的动态预览，只需使用Rectangle 并将Fill 设置为VisualBrush。如果您想允许在ViewBox 中调整主机Rectangle 的大小。

要获得具有正确纵横比的初始宽度，只需将Rectangle 绑定到用作VisualBrush 的Visual 的容器元素的ActualWidth 和ActualHeight：

<Grid>
  <Grid.Resources>
    <VisualBrush x:Key="VisualBrush" 
                 Visual="{Binding ElementName=StackPanel}"/>
  </Grid.Resources>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <StackPanel x:Name="StackPanel" 
              Orientation="Horizontal">
    <StackPanel>
      <TextBlock Text="ComboBox1 Label" />
      <ComboBox />
    </StackPanel>
    <StackPanel>
      <TextBlock Text="ComboBox2 Label" />
      <ComboBox />
    </StackPanel>
  </StackPanel>

  <Viewbox Grid.Row="1">
    <Rectangle Width="{Binding ElementName=StackPanel, Path=ActualWidth}"
               Height="{Binding ElementName=StackPanel, Path=ActualHeight}"
               Fill="{StaticResource VisualBrush}" />
  </Viewbox>
</Grid>

【讨论】：