在WPF中自动调整绘图容器

I'm currently working on a small C# Project to visualize our seating order in the Office. As we have multiple, different rooms, the desk layout is created dynamically. The data comes from an XML where a jpg-image (room layout) is stored as a base64 encoded string. Moreover, the XML file contains a list of all desks with their absolute pixel-Position on the Image.

我目前正在开展一个小型C#项目,以便在办公室中查看我们的座位订单。由于我们有多个不同的房间,因此桌面布局是动态创建的。数据来自XML,其中jpg图像(房间布局)存储为base64编码的字符串。此外,XML文件包含所有办公桌的列表,其图像上的绝对像素位置。

Until now, I managed to draw the different room-images, each into a seperate tab page and all the desks (which are stored in a List of a "desk"-object.) at their position on the Image. All this is done in the xaml-file of the window.

到目前为止,我设法绘制了不同的房间图像,每个房间图像分别位于单独的标签页和所有桌子(存储在“桌面”对象列表中)在图像上的位置。所有这些都在窗口的xaml文件中完成。

My Problem is now that the canvas does not size the children, i.e. Image and desks, according to the parent's (i.e. tab page's) size.

我的问题是,现在画布根据父母的(即标签页)大小不会调整孩子的大小,即图像和桌子。

I already tried using a grid oder putting a viewbox aroud the canvas and writing a custom canvas class by overriding the MeasureOverride() function.

我已经尝试使用网格或者在画布上放置一个视图,并通过覆盖MeasureOverride()函数来编写自定义画布类。

Here is a minimal working example of my xaml file:

这是我的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>

Does anybody have an idea what I can do? I'm not bound to a canvas. If there is another good way to do the Job, just let me know.

有人知道我能做什么吗?我没有画布。如果有另一个好方法来完成这项工作,请告诉我。

1 个解决方案

#1

Viewbox should work. For example this will resize correctly (if you have jpeg with 96 dpi, if no, I think you'll have to recalculate canvas sizes):

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>