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



我目前正在做一个小型的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>

有人知道我能做什么吗?我不被束缚在画布上。如果有其他好方法可以完成这项工作,请告诉我。

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>

最新更新