Фон Graphpaper с XAML и языком разметки пути - PullRequest
Новая
       26

Фон Graphpaper с XAML и языком разметки пути

2 голосов
/ 31 января 2012

в течение нескольких часов я пытаюсь создать графический фон для ListView. Для лучшего понимания я опишу, что я имею в виду. Я хочу реализовать это с XAML. До сих пор я заканчивал маленькие прямоугольники с полем 10px, но мне нужна еще одна сетка с более крупными линиями с полем 100px, и я не очень понимаю язык разметки пути.

Вот мой код: 

    <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>

Это то, что я делал до сих пор, но я не знаю, как изменить параметры геометрии, чтобы увеличить расстояние между линиями.

Я буду рад каждому ответу!

1 Ответ

2 голосов
/ 25 февраля 2012

GeometryDrawing.Brush - цвет заливки или фона. GeometryDrawing.Pen - цвет линии. Похоже, вы намереваетесь закрасить линии вашей миллиметровки, но вы используете неправильное свойство. Когда я это исправил, я заметил, что ваши линии сетки 10px не повторяются под линиями сетки 100px так, как вы хотели, поэтому вот решение, которое я придумал. 

<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}" />
...