WPF中的自动调整大小的绘图容器答案

【问题标题】：Auto-size drawing container in WPFWPF中的自动调整大小的绘图容器
【发布时间】：2017-07-20 07:15:46
【问题描述】：

我目前正在开发一个小型 C# 项目，以可视化我们在办公室中的座位顺序。由于我们有多个不同的房间，桌子布局是动态创建的。数据来自 XML，其中 jpg 图像（房间布局）存储为 base64 编码字符串。此外，XML 文件包含所有桌子及其在图像上的绝对像素位置的列表。

到目前为止，我设法将不同的房间图像绘制到单独的标签页中，并且所有桌子（存储在“桌子”对象的列表中。）在图像上的位置。所有这些都在窗口的 xaml 文件中完成。

我现在的问题是画布没有根据父级（即标签页）的大小调整子级（即图像和桌子）的大小。

我已经尝试使用网格或将视图框放置在画布周围，并通过覆盖 MeasureOverride() 函数来编写自定义画布类。

这是我的 xaml 文件的最小工作示例：

<TabControl x:Name="tabControl" Grid.Column="0">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>

            <Canvas>
                <Image
                    Source="{Binding Image}" >
                </Image>
                <ItemsControl  ItemsSource="{Binding Docks}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                    Height="34"
                                    BorderThickness="1"
                                    Tag="{Binding Self}"
                            >
                                <TextBlock 
                                    Text="{Binding Caption}"
                                    RenderTransformOrigin="0.5,0.5"
                                    Width="{Binding DockWidth}"
                                    TextAlignment="Center"
                                    VerticalAlignment="Center"
                                    TextWrapping="Wrap"
                                >
                                </TextBlock>
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform X="{Binding Position.Item1}" Y="{Binding Position.Item2}"/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Canvas>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

有人知道我能做什么吗？我不受画布的束缚。如果还有其他好方法可以完成这项工作，请告诉我。

【问题讨论】：

Canvas 元素从不调整子元素的大小。不幸的是，您没有提供一个好的minimal reproducible example 来说明您的问题。如果没有像样的代码示例，您的代码中的关系并不清楚。 Grid 和/或Viewbox 可能是合适的解决方案，可能是后者，因为它会缩放，而Grid 只是调整尺寸。但是你还没有解释你是如何尝试应用这些的，或者为什么这种尝试没有奏效。请改进问题。

标签： c# .net wpf xaml

【解决方案1】：

Viewbox 应该可以工作。例如，这将正确调整大小（如果您有 96 dpi 的 jpeg，如果没有，我认为您将不得不重新计算画布大小）：

<Grid HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch">
        <Viewbox Stretch="Fill"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch">
            <Canvas Width="{Binding ElementName=img, Path=ActualWidth}"
                    Height="{Binding ElementName=img, Path=ActualHeight}">
                <Image Name="img"
                       Source="pack://siteoforigin:,,,/images/img1.jpg" />
                <Canvas Canvas.Left="100"
                    Canvas.Top="50">
                <Rectangle Width="50"
                           Height="100"
                           Fill="Beige" />
                <TextBlock Text="AAA" />
            </Canvas>
            </Canvas>
        </Viewbox>
    </Grid>

【讨论】：