Zoom Control for ItemsControl

Aug 21, 2012 at 7:45 AM

Hi,

i'm trying to apply a zoom control on an ItemsConrol, using canvas,

the effect that i would like to have is ellipses across the screen, and i posistion them according to X and Y coordinates. (like a star map with zoom on it)

 here is the major part of the code:

<Extensions:ZoomControl Margin="20,20,0,0" Background="Transparent" >       
<ItemsControl ItemsSource="{Binding Path=PointList}">
 <ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
              <Canvas/>
  </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
 <ItemsControl.ItemTemplate>
 <DataTemplate>
  <Grid>
   <Ellipse Width=50
                                Height=50
                                Fill="{Binding Path=vColor, Mode=OneWay}"
                                Stroke="Black" StrokeThickness="1">
                         </Ellipse>
                </Grid>
         </DataTemplate>
 </ItemsControl.ItemTemplate>
 <ItemsControl.ItemContainerStyle>
  <Style TargetType="ContentPresenter">
   <Setter Property="Canvas.Left" Value="{Binding Path=Xpos}" />
   <Setter Property="Canvas.Top" Value="{Binding Path=Ypos}" />
  </Style>
 </ItemsControl.ItemContainerStyle>
</ItemsControl>
</Extensions:ZoomControl>

 

now, it all works besids that the "Fill" button in the zoomControl doen't seem to work , if i zoom in.

but if i remove the purple part (ItemsPanelTemplate), it set to the default (stack panel if i remember correctly), and then, the "Fill" does work, but i cannot position my ellipse according to X and Y as i would like (as it's not a canvas),

 so my question is, does the ZommControl work with Canvas? if so, what am i doing wrong?

if not, do you have some suggestion that can help me achieve the effect that i wanted?

thanks!

Yoav.