带有XAML和路径标记语言的Graphpaper背景 [英] Graphpaper Background with XAML and Path Markup Language

问题描述

几个小时，我尝试为ListView创建一个graphpaper背景。为了更好地理解，我将描述我的意思。我想用XAML来实现它。
到目前为止，我已经完成了10px页边距的小矩形，但是我需要另一个网格，更大的线条有100px的边距，我不太了解Path标记语言。

下面是我的代码：

 < DrawingBrush x：Key =ListBackgroundBrushViewport =0 ，0,10,10ViewportUnits =AbsoluteTileMode =Tile> 
< DrawingBrush.Drawing> 
< DrawingGroup> 
 <！ -  Linien alle 10 Pixel  - > 
   
 <！ -  Linien alle 100 Pixel Senkrecht  - > 
< GeometryDrawing Geometry =M0,0 L1,0 1,0.2,0,0.2ZBrush =Red/> 
 <！ -  Linien alle 100 Pixel Wagerecht  - > 
 < / DrawingGroup> 
 < / DrawingBrush> 
< ControlTemplate TargetType =ListView> 
< Border CornerRadius =2Background ={StaticResource ListBackgroundBrush}BorderThickness =1,1,1,1BorderBrush =＃E1E1E1SnapsToDevicePixels =True> 
< / ControlTemplate> 
  

这就是我到现在为止所做的，但我不知道如何修改几何参数来创建边距

我会为每一个答案感到高兴！

解决方案

 < DrawingBrush x：Key =ListBackgroundBrushViewport =0,0,100,100ViewportUnits =AbsoluteTileMode =Tile > 
< DrawingBrush.Drawing> 
< DrawingGroup> 
 
 <！ - 几何10px的正方形 - > 
< GeometryDrawing Brush =White> 
< GeometryDrawing.Geometry> 
< GeometryGroup> 
< PathGeometry图形=
 M10,0 L10,100 
 M20,0 L20,100 
 M30,0 L30,100 
 M40,0 L40,100 
 M50,0 L50,100 
 M60,0 L60,100 
 M70,0 L70,100 
 M80,0 L80,100 
 M90,0 L90,100 
 
 M0,10 L100,10 
 M0,20 L100,20 
 M0,30 L100,30 
 M0,40 L100,40 
 M0， 50 L100,50 
 M0,60 L100,60 
 M0,70 L100,70 
 M0,80 L100,80 
 M0,90 L100,90/> 
< / GeometryGroup> 
< /GeometryDrawing.Geometry> 
< GeometryDrawing.Pen> 
<笔厚度=1Brush =Green/> 
 < / GeometryDrawing> 
 
 <！ - 几何为100px正方形 - > 
< GeometryDrawing Brush =透明> 
< GeometryDrawing.Geometry> 
< GeometryGroup> 
< PathGeometry图形=M0,0 L100,0 L100,100/> 
< / GeometryGroup> 
< /GeometryDrawing.Geometry> 
< GeometryDrawing.Pen> 
<笔厚度=3笔刷=绿色/> 
 < / GeometryDrawing> 
 
< / DrawingGroup> 
 < / DrawingBrush> 
 
< Grid Background ={StaticResource ListBackgroundBrush}/> 
  

for some hours im trying to create a graphpaper background for a ListView. For a better understanding I'll describe what I mean. I want to realise it with XAML. Until now I finished the little rectangles with 10px margin, but I need another grid, with bigger lines which have a margin of 100px and I don't really understand the Path Markup Language.

Here is my code:

    <DrawingBrush x:Key="ListBackgroundBrush" Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <!--  Linien alle 10 Pixel -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="#EAEAEA" /><!-- Wagerecht-->
            <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#EFEFEF" /><!--  Senkrecht -->

            <!-- Linien alle 100 Pixel Senkrecht  -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.2, 0,0.2Z" Brush="Red" />
            <!-- Linien alle 100 Pixel Wagerecht -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.2, 0,0.2Z" Brush="Green" />
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>    
<ControlTemplate TargetType="ListView">
                <Border CornerRadius="2" Background="{StaticResource ListBackgroundBrush}" BorderThickness="1,1,1,1" BorderBrush="#E1E1E1"  SnapsToDevicePixels="True">
</ControlTemplate>

Thats what I did until now, but I dont know how to modify the Geometry Parameters to make the margin between the lines bigger.

I'll be happy about every answer!

解决方案

GeometryDrawing.Brush is the fill, or background color. GeometryDrawing.Pen is the line color. It appears you're intending to color the lines of your Graph paper but you're using the wrong property. When I fixed that, I noticed your 10px grid lines don't repeat under the 100px grid lines they way you wanted, so here's the solution I came up with.

<DrawingBrush x:Key="ListBackgroundBrush" Viewport="0,0,100,100" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>

            <!-- Geometry for the 10px squares -->
            <GeometryDrawing Brush="White">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <PathGeometry  Figures="
                          M10,0 L10,100 
                          M20,0 L20,100
                          M30,0 L30,100 
                          M40,0 L40,100
                          M50,0 L50,100 
                          M60,0 L60,100
                          M70,0 L70,100 
                          M80,0 L80,100
                          M90,0 L90,100

                          M0,10 L100,10 
                          M0,20 L100,20
                          M0,30 L100,30 
                          M0,40 L100,40
                          M0,50 L100,50 
                          M0,60 L100,60
                          M0,70 L100,70 
                          M0,80 L100,80
                          M0,90 L100,90"  />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                    <Pen Thickness="1" Brush="Green" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>

            <!-- Geometry for the 100px squares -->
            <GeometryDrawing Brush="Transparent">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <PathGeometry  Figures="M0,0 L100,0 L100,100" />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>            
                    <Pen Thickness="3" Brush="Green" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>

        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush> 

<Grid Background="{StaticResource ListBackgroundBrush}" />  

这篇关于带有XAML和路径标记语言的Graphpaper背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！