ScatterViewItem Custom Shape

Question

I have a ScatterViewItem which contains a Canvas

                <Ellipse x:Name="Outer_Ellipse" Fill="White" Width="200" Height="200"></Ellipse>
                <Ellipse Fill="Red" Canvas.Top ="15" Canvas.Left="15" Canvas.Right="15" Canvas.Bottom="15" Width="170" Height="170" ></Ellipse>

            </Canvas>
        </s:ScatterViewItem>

Id like to provide a Custom Shape so that the default rectangle shape is not show (here is a picture of my current implementation alt text .

I followed this example here link text and have consulted the Puzzle that comes with the SDK but I am unable to get it working, my ScatterViewItem is blank.

I defined a path in the SurfaceWindow.Resources

 <Path x:Key="ScatterShape" Fill="Blue">
        <Path.Data>
            <EllipseGeometry 
                RadiusX="200"
                RadiusY="200">
            </EllipseGeometry>
        </Path.Data>
    </Path>

And copied the style attributes from the link above. I created my CustomShape.cs as instructed and then created the ScatterViewItem.

System.Windows.Shapes.Path path;
path = (System.Windows.Shapes.Path)Resources["ScatterShape"];
CustomShape poly = new CustomShape(path.Data);
ScatterViewItem item = new ScatterViewItem();
item.Content = poly;
item.CanScale = false;
Binding binding = new Binding();
binding.Source = poly;
item.SetBinding(ScatterViewItem.DataContextProperty, binding);
scatter.Items.Add(item)

Im slightly confused with the above code since my understanding with the line

item.Content = poly

would overwrite the content of the ScatterViewItem (i.e in my case the Canvas or in another case say an Image). For the time being I don't need to move or scale the ScatterView item so no shadows are neccessary I just simply want to remove the rectangular box.

score 4 · Accepted Answer · answered Dec 07 '10 at 15:05

You can achieve this by modifying the ControlTemplate for the ScatterViewItem.

If you want to remove all the visual features of the scatterview then I guess you could get away with an empty template:

<Style TargetType="{x:Type s:ScatterViewItem}">
    <Setter Property="Template"> 
        <Setter.Value> 
          <ControlTemplate TargetType="{x:Type s:ScatterViewItem}"> 
            <ContentPresenter /> 
          </ControlTemplate> 
        </Setter.Value> 
    </Setter>
</Style>

The above template will change all scatterview items to have a blank template, but you could give it a x:Key="YourStyleName" and set the ItemContainerStyle of the ScatterView in question to only affect that scatter view.

Please note that if you use Expression Blend, you may need to add a reference to Microsoft.Surface.Presentation.Generic.dll to do this or Blend may crash when editing the template.

Thanks for the answer, really appreciated. I'd spent hours trying to follow the jigsaw example in the SDKand got no where. I hadn't realised how simple it was to do using the ControlTemplate. — Bear, Dec 16 '10 at 18:16

score 1 · Answer 2 · answered Dec 11 '10 at 10:15

You can also remove the shadow, so that the ScatterViewItem is no longer visible.

Assuming that item is your ScatterViewItem:

item.ApplyTemplate();
item.Background = new SolidColorBrush(Colors.Transparent);
item.ShowsActivationEffects = false;
Microsoft.Surface.Presentation.Generic.SurfaceShadowChrome ssc;
ssc = item.Template.FindName("shadow", item) as Microsoft.Surface.Presentation.Generic.SurfaceShadowChrome;
ssc.Visibility = Visibility.Hidden;

score 0 · Answer 3 · answered Dec 31 '12 at 08:55

I am having similar Problem. Here is my code.

 <s:ScatterView>
    <s:ScatterView.Items>
        <s:ScatterViewItem Height="1721" Width="2169">                
            <Canvas >
                <Path Data="M0 2728 l0 -1012 28 26 c23 21 32 24 61 17 31 -6 40 -3 75 27 38 32 99 114 92 122 -6 5 -46 -21 -46 -30 0 -15 -56 -58 -75 -58 -29 0 -105 74 -105 102 0 12 14 37 32 55 31 32 32 34 20 78 -20 74 -17 82 29 89 22 4 44 4 49 1 13 -8 23 54 11 69 -8 10 -6 17 8 30 12 11 16 25 13 41 -4 24 -3 25 24 15 25 -10 31 -9 43 9 7 12 24 21 37 21 25 0 30 10 14 26 -5 5 -7 20 -3 32 7 29 34 25 48 -6 12 -27 20 -28 38 -1 13 18 24 20 74 18 32 -2 173 -2 314 -1 l256 2 12 113 c6 61 12 191 12 287 1 96 5 182 10 191 14 27 76 61 98 54 24 -7 29 -20 37 -103 10 -106 29 -115 65 -33 24 57 70 104 95 99 10 -1 29 -25 43 -53 37 -72 66 -79 141 -38 78 44 123 50 180 25 88 -38 122 -38 197 0 64 31 75 33 193 36 77 3 145 -1 177 -9 45 -10 61 -10 115 5 135 37 121 41 253 -81 64 -59 124 -111 133 -114 27 -10 473 0 515 12 47 12 84 47 92 86 22 99 71 155 143 159 27 2 79 17 118 34 46 21 97 35 153 41 64 7 100 18 150 44 36 19 86 37 111 41 25 4 65 17 90 29 52 26 113 39 140 30 29 -9 25 -49 -10 -89 -25 -28 -29 -38 -21 -59 5 -14 15 -28 21 -32 12 -8 3 -73 -13 -94 -16 -19 17 -43 103 -76 66 -25 80 -27 188 -23 109 4 121 6 176 36 32 18 67 32 77 32 25 0 24 12 -1 35 -13 12 -20 29 -18 44 2 21 10 27 38 32 39 6 102 40 140 75 23 21 30 22 64 13 52 -14 82 -5 94 30 8 22 18 30 45 35 37 7 73 38 63 55 -9 14 -94 40 -158 47 l-58 7 0 87 c0 48 -3 90 -7 93 -3 4 -5 35 -4 70 3 73 24 102 105 142 l50 25 -2592 0 -2592 0 0 -1012z" Stroke="Black"></Path>
....
....
  </Canvas>
        </s:ScatterViewItem>
    </s:ScatterView.Items>
</s:ScatterView>

There are so many shapes in the canvas and the size of the canvas is also much higher. so when i run the application, The canvas doesn't get re size when i re size the ScatterViewItem. And Event the Canvas i shown outside of the ScatterViewItem.

ScatterViewItem Custom Shape

3 Answers3