Question

我对WPF中相对坐标的工作方式感到有些困惑，特别是在使用DrawingBrushes的场景中。

让我们说我想画一个方形区域的背景，这个区域的大小很灵活。我想用特殊的＃34;形状画出背景，让我们说一种＆＃34; T＆＃34;放在一边，垂直行程穿过该区域的中间。使用相对坐标（区域的大小是灵活的），我想出了以下XAML：

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<Window.Resources>

    <DrawingBrush x:Key="EdgeGrid">
        <DrawingBrush.Drawing>
            <GeometryDrawing>
                <GeometryDrawing.Geometry>
                    <!-- draw a single T laying on the side -->
                    <GeometryGroup>
                        <!-- top to bottom -->
                        <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                        <!-- left to right -->
                        <LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                    <Pen Thickness="0.01" Brush="Black" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</Window.Resources>      
    <Grid Name="LayoutRoot">
    <Rectangle Width="400" Height="400" Stroke="Black" StrokeThickness="1" Fill="{StaticResource EdgeGrid}">
    </Rectangle>

</Grid>

但我得到的结果如下：

Output http://www.bilder-hochladen.net/files/big/jf1u-1p-29ec.png

垂直笔划是否应该正好穿过中间（X坐标是0.5）？另外，如何在相对模式下将笔的厚度设置为1或2像素？有什么想法吗？

Answer 1

要获得正确的垂直笔画，你需要这样做：

<GeometryGroup>
     <!-- top to bottom -->
     <LineGeometry StartPoint="0.75,0.0"
                   EndPoint="0.75,1" />
     <!-- left to right -->
     <LineGeometry StartPoint="0.5,0.5"
                   EndPoint="1,0.5" />
</GeometryGroup>

但这不会帮助你增加笔的厚度。通常，如果要缩放几何体 - 首先使用您喜欢的绝对坐标（比如0-100范围）创建它，然后将其放入ViewBox或使用ScaleTransform，如下所示：

    <Viewbox Width="400"
             Height="400">
        <Path Stroke="Black"
              StrokeThickness="1">
            <Path.Data>
                <GeometryGroup>
                    <!-- top to bottom -->
                    <LineGeometry StartPoint="75,0"
                                  EndPoint="75, 100" />
                    <!-- left to right -->
                    <LineGeometry StartPoint="50,50"
                                  EndPoint="100, 50" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Viewbox>

Answer 2

您必须将DrawingBrush的ViewboxUnits属性设置为Absolute（而不是默认的RelativeToBoundingBox）。 Viewbox仍为(0,0,1,1)。

有关画笔视图框和视口的详细信息，请参阅MSDN上的TileBrush Overview文章。

<DrawingBrush x:Key="EdgeGrid" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <GeometryGroup>
                    <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                    <LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <Pen Thickness="0.01" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

当然，这不会让您定义笔画宽度（以像素为单位）。以绝对坐标绘制图形然后将整个图形放在Viewbox中也不会有太大帮助，因为笔划仍然可以缩放。

为了获得具有固定笔触宽度的可伸缩图形，您必须使用Path元素，在其中设置StrokeThickness和Data属性并将ScaleTransform指定给{{1}用作Transform的几何的属性。

在绘制具有固定笔划宽度的居中T形图形的特殊情况下，您可以简单地在画布中绘制两条（非常长的）线，其中坐标原点通过将Canvas放在2x2网格中居中。您甚至可以选择为两条线设置不同的笔触和笔触宽度。

Data

Answer 3

让我们看看提出的解决方案将如何。假设我们想要在一种网格中显示形状，并根据数据绘制各种形状（通过选择适当的DateTemplate）。为简单起见，在这个例子中，让我们只绘制一种形状（十字形，如我最初的问题）：

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">

    <ItemsControl ItemsSource="{Binding data}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="10" Rows="10">
                </UniformGrid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>        
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="Cell">
                   <Path StrokeThickness="2" Stroke="Blue" SnapsToDevicePixels="True">
                        <Path.Data>
                            <GeometryGroup>
                                <GeometryGroup.Transform>
                                    <ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
                                </GeometryGroup.Transform>
                                <!-- top to bottom -->
                                <LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
                            </GeometryGroup>
                        </Path.Data>
                    </Path>
                    <Path StrokeThickness="1" Stroke="Black" SnapsToDevicePixels="True">
                        <Path.Data>
                            <GeometryGroup>
                                <GeometryGroup.Transform>
                                    <ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
                                </GeometryGroup.Transform>
                                <!-- left to right -->
                                <LineGeometry StartPoint="0,0.5" EndPoint="1,0.5"/>
                            </GeometryGroup>
                        </Path.Data>
                    </Path>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>    
    </ItemsControl>        
   </Window>

@Clemens这是你想到的解决方案吗？这是正确的做法吗？我对结果的唯一问题是线条模糊，甚至在水平线上看到了断裂。对此有什么解决方案吗？

DrawingBrush中的相对坐标

3 个答案: