1

I'm working off of Microsoft's Shape Elements Sample. I'd like to modify it such that it draws into only a portion of the canvas. In the original XAML the blue grid spans the whole canvas. I would like to place that grid in the middle of a 3x3 super-grid. The blue grid (with math coordinates) should be positioned in the middle of the canvas.

Goal

mockup

What I have so far

<!-- This example shows how to draw Line elements. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Microsoft.Samples.Graphics.LineExample"
    WindowTitle="Line Example" >
<StackPanel>    
<Border>
  <Border.Background>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="#CCCCFF" Offset="0" />
        <GradientStop Color="AliceBlue" Offset="0.25" />
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Border.Background>
  <TextBlock Margin="10" HorizontalAlignment="Left"> 
    Line Examples
  </TextBlock>
</Border>    

<StackPanel Margin="10">    
<Border Style="{StaticResource MyGridBorderStyle}">
  <Canvas Height="300" Width="300">

    <!-- Draws a diagonal line from (10,10) to (50,50). -->
    <Line
      X1="10" Y1="10"
      X2="50" Y2="50"
      Stroke="Black"
      StrokeThickness="4" />

    <!-- Draws a diagonal line from (10,10) to (50,50)
         and moves it 100 pixels to the right. -->
    <Line
      X1="10" Y1="10"
      X2="50" Y2="50"
      StrokeThickness="4"
      Canvas.Left="100">
      <Line.Stroke>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="Blue" Offset="0.25" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Line.Stroke>
    </Line>

    <!-- Draws a horizontal line from (10,60) to (150,60). -->
    <Line
       X1="10" Y1="60"
       X2="150" Y2="60"
       Stroke="Black"
       StrokeThickness="4"/>

  </Canvas>
</Border>
</StackPanel>
</StackPanel>
</Page>

What modifications to this XAML are needed in order to accomplish my goal?

Community
  • 1
  • 1
Travis Banger
  • 697
  • 1
  • 7
  • 19
  • 1
    Not sure what you're asking here, do you just want to know how to make that grid layout or what? – Chris W. Mar 17 '14 at 19:42
  • [This Example](http://stackoverflow.com/a/15469477/643085) of drawing lines in WPF might be useful. – Federico Berasategui Mar 17 '14 at 19:43
  • "Not sure what you're asking here" I need the center region to be special: a 792x612 letter page. Ideally all charts drawn should fall inside the blue grid. However, if a wrong coordinate transform occurs, I should be able to realize that I missed the proper region by so many pixels to the right. I need to know how to translate the origin and how to prevent the canvas from covering the lower buttons. – Travis Banger Mar 17 '14 at 19:47
  • The XAML file comes from here:http://msdn.microsoft.com/en-us/library/ms771601%28v=vs.90%29.aspx – Travis Banger Mar 17 '14 at 20:00
  • Sounds to me like this question isn't so much about a xaml layout, and more of you wanting something much more complex and broad. – Chris W. Mar 17 '14 at 20:03
  • "this question isn't so much about a xaml layout" I will be 100% satisfied with a proper XAML file, Chris. It does not have be able to talk, walk my dog or come in a gold platter. If that does not qualify a XAML layout, I don't know what does... – Travis Banger Mar 17 '14 at 20:13
  • The problem with what you're asking is it seems like you're asking for a self aware control which you can draw on, report back point locations, etc. If you're actually only asking how to make the visual for the grid, that's simple enough. However I'm not familiar with a "super-grid" and I'm sure the issue here just lies in how the question is being communicated/interpreted. – Chris W. Mar 17 '14 at 20:27
  • Chris I do not need anything fancy like point locations. The so-called super-grid is composed of 3x3=9 rectangles (click on "Desired-GUI"), with the middle one being the grid with math-notebook type of blue lines. – Travis Banger Mar 17 '14 at 20:35
  • My use of "super" has nothing to do with Kal-El: here's the meaning: "“a category that embraces a number of lesser items of the specified kind” ( superfamily; supergalaxy)" http://dictionary.reference.com/browse/super-. It is simply a way of saying that a grid is inside another. Sub-routines have super-routines. – Travis Banger Mar 17 '14 at 20:38
  • I found the answer to the origin transform question here: http://stackoverflow.com/questions/1185948/how-to-change-x-y-origin-of-canvas-to-bottom-left-and-flip-the-y-coordinates – Travis Banger Mar 17 '14 at 21:00
  • 1
    This is a better illustration: http://patriot.net/~ramon/misc/Target-GUI.png – Travis Banger Mar 17 '14 at 21:19
  • Your patriot.net links don't seem to work for me. Internally we use imgur.com which works very nicely – Richard Tingle Mar 17 '14 at 22:17

0 Answers0