1

キャンバスに複数の画像を表示したい。キャンバス内でそれらを異なる位置に配置する必要があります。画像のクラスを作成しました：

class MapItem:Image
{
  public int DistanceToTop { get; set; }
  public int DistanceToLeft { get; set; }
}

私のXAMLは次のようになります:

<UserControl.DataContext>
    <Map:MapViewModel/>
</UserControl.DataContext>

<ItemsControl ItemsSource="{Binding All}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="Image">
            <Setter Property="Canvas.Left" Value="{Binding DistanceToLeft}" />
            <Setter Property="Canvas.Top" Value="{Binding DistanceToTop}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

DataContext として使用される私の ViewModel :

class MapViewModel : ViewModelBase
{
  public ObservableCollection<MapItem> All   { get; set; }

  public MapViewModel()
  {
    All = new ObservableCollection<MapItem>();
    var wSource = new BitmapImage(new Uri(@"ImagePath"));
    var wImage = new MapItem { Source = wSource, DistanceToLeft = 20, DistanceToTop = 20 };
    test = wImage;
    All.Add(wImage);
  }
}

XAML で DistanceToLeft と DistanceToTop へのバインドが機能しないのはなぜですか?!? 私の ObservableCollection で使用されているオブジェクトを自動的に調べると思われませんか?

編集：私はまだ問題があります。しかし、今ではそれがバインディングに関連していることを知っています。GalaSoft フレームワークを使用して MVVM パターンを使用して、これらすべてを実装しようとしています。まず、DataContext を MapViewModel に設定します。ObservableCollection から MapItem のプロパティにアクセスできないのはなぜですか?

EDIT : 最後に、クレメンスとレイチェルの助けを借りて、これで終わりました。

私のMapItemクラス：

class MapItem:Image
{
  public LatLon CoordMiddleOfImage { get; set; }
  public LatLon CoordTopLeftOfImage { get; set; }

  public int DistanceToTop
  {
    get { return (int) Canvas.GetTop(this); }
    set { Canvas.SetTop(this, value); }
  }

  public int DistanceToLeft
  {
    get { return (int)Canvas.GetLeft(this); }
    set { Canvas.SetLeft(this, value); }
  }

  public int ZOrder
  {
    get { return Panel.GetZIndex(this); }
    set { Panel.SetZIndex(this, value); }
  }
}

そして、私のXAMLは次のようになります:

<ItemsControl ItemsSource="{Binding All}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas ClipToBounds="True"  SnapsToDevicePixels="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

それは今のところ魅力のように機能します:-)

4

2 に答える 2

5

DistanceToLeftなぜandDistanceToTopプロパティを発明したのに、束縛に苦戦しているのか、私にはよくわかりません。Canvas.LeftImage コントロールを項目として使用する場合は、添付プロパティと を直接適用してみませんかCanvas.Top:

All = new ObservableCollection<Image>(); // no need for derived MapItem
var wSource = new BitmapImage(new Uri(@"ImagePath")); 
var wImage = new Image { Source = wSource }; 
Canvas.SetLeft(wImage, 20);
Canvas.SetTop(wImage, 20);
All.Add(wImage);

したがって、スタイルは必要ありません:

<ItemsControl ItemsSource="{Binding All}">    
    <ItemsControl.ItemsPanel>    
        <ItemsPanelTemplate>    
            <Canvas />    
        </ItemsPanelTemplate>    
    </ItemsControl.ItemsPanel>    
</ItemsControl>

ただし、次のような、コントロールではない実際の ViewModel クラスを作成することを検討する必要があります。

public class ImageItem
{
    public string Source { get; set; }
    public double Left { get; set; }
    public double Top { get; set; }
}

MapItem クラスと同様に使用します

All = new ObservableCollection<ImageItem>();
ImageItem image = new ImageItem { Source = @"ImagePath", Left = 20, Top = 20 };
All.Add(image);

次のように ItemContainerStyle を定義します。

<ItemsControl.ItemContainerStyle>
    <!-- ContentPresenter is the default item container in ItemsControl -->
    <Style TargetType="ContentPresenter">
        <Setter Property="Canvas.Left" Value="{Binding Left}"/>
        <Setter Property="Canvas.Top" Value="{Binding Top}"/>
        <Setter Property="ContentTemplate">                        
            <Setter.Value>
                <DataTemplate>
                    <Image Source="{Binding Source}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ItemsControl.ItemContainerStyle>
于 2012-08-24T17:16:46.663 に答える
1

ItemsControlは各項目を でラップするためContentPresenter、 のスタイルItemContainerStyleはContentPresenterではなく用です。Image

スタイルから削除すると、正常にTargetType="Image"動作するはずです

于 2012-08-24T16:06:52.673 に答える