帆布绑定在silverlight [英] Canvas binding in silverlight

问题描述

我正在尝试创建一个画布，其中的项目位于canvast上的某个位置，因为我无法将源和模板直接绑定到Canvas，所以我使用了ItemsControl。
但是有一个问题，所有的项目都位于0,0。我已经测试了他们不返回0,0的绑定。
我如何做这项工作，所以项目位于正确的地方？

也可以在画布上创建2层，其中每层绑定到不同的源，并使用不同的模板？

这是在Silverlight中

 < ItemsControl Grid.Row =1Grid.Column =1
宽度=650高度=650
 ItemsSource ={Binding Skills}> ; 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< Canvas Margin =0
宽度=650Height =650/> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
< StackPanel Canvas.Top ={Binding Top}Canvas.Left ={Binding Left}> 
< TextBlock Text ={Binding Name}/> 
< Image Source ={Binding Icon}/> 
< StackPanel Orientation =Horizo​​ntal> 
< TextBlock FontWeight =BoldTextAlignment =CenterText ={Binding SkillPointsStatusText}/> 
< / StackPanel> 
< / StackPanel> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
  

使用ItemContainerStyle测试

 < ItemsControl Grid.Row =1Grid.Column =1
宽度=650高度=650
 ItemsSource ={Binding Skills}> ; 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< Canvas Margin =0
宽度=650Height =650/> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
< StackPanel> 
< TextBlock Text ={Binding Name}/> 
< Image Source ={Binding Icon}/> 
< TextBlock FontWeight =BoldTextAlignment =CenterText ={Binding SkillPointsStatusText}/> 
< / StackPanel> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< ItemsControl.ItemContainerStyle> 
< Style> 
< Setter Property =Canvas.TopValue ={Binding Top}/> 
< Setter Property =Canvas.LeftValue ={Binding Left}/> 
< / Style> 
< /ItemsControl.ItemContainerStyle> 
< / ItemsControl> 
  

我已经放弃了项目，但是如果有一个anwser， p>

解决方案

以下所有内容在SL4中不起作用，因为它取决于 Setter中的绑定。价值。

---

尝试在 ItemContainerStyle ，因为您的 StackPanel 不是根元素;您的模板将被放置在一个 ContentPresenter 中，所以您附加的属性在 StackPanel 中将被忽略。 / p>

 < ItemsControl.ItemContainerStyle> 
< Style> 
< Setter Property =Canvas.TopValue ={Binding Top}/> 
< Setter Property =Canvas.LeftValue ={Binding Left}/> 
< / Style> 
< /ItemsControl.ItemContainerStyle> 
  

---

编辑： Silverlight不支持 ItemContainerStyle ，您可以为 ContentPresenters 设置通用样式，这应该同样适用：

 < ItemsControl ItemsSource ={Binding Data}> 
< ItemsControl.Resources> 
< Style TargetType =ContentPresenter> 
< Setter Property =Canvas.LeftValue ={Binding Left}/> 
< Setter Property =Canvas.TopValue ={Binding Top}/> 
< / Style> 
< /ItemsControl.Resources> 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
< Canvas /> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
 ... 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
  

I'm trying to create a canvas, with items located at specefied locations on the canvast, as i can not bind an source and a template directly to a Canvas, have i used a ItemsControl. But there are a problem all the items are located at 0,0. And i have tested the Bindings they do not return 0,0. How can i make this work so the items are located at the right place?

Also is it poissible to create 2 layers on the canvas, where each layer is binded to a diffrent source, and uses a diffrent template?

This is in Silverlight

<ItemsControl Grid.Row="1" Grid.Column="1"
                Width="650" Height="650"
                ItemsSource="{Binding Skills}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Margin="0"
                Width="650" Height="650" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Canvas.Top="{Binding Top}" Canvas.Left="{Binding Left}">
                    <TextBlock Text="{Binding Name}" />
                <Image Source="{Binding Icon}" />
                <StackPanel Orientation="Horizontal" >
                    <TextBlock FontWeight="Bold" TextAlignment="Center" Text="{Binding SkillPointsStatusText}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Test with ItemContainerStyle

<ItemsControl Grid.Row="1" Grid.Column="1"
                Width="650" Height="650"
                ItemsSource="{Binding Skills}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Margin="0"
                Width="650" Height="650" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <Image Source="{Binding Icon}" />
                <TextBlock FontWeight="Bold" TextAlignment="Center" Text="{Binding SkillPointsStatusText}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Top" Value="{Binding Top}" />
            <Setter Property="Canvas.Left" Value="{Binding Left}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

Well i have droped the project, but i will leave the question open should one have an anwser

解决方案

All of the following does not work in SL4 since it depends on bindings in a Setter.Value.

---

Try setting the binding in the ItemContainerStyle since your StackPanel is not the root element; your template will be placed in a ContentPresenter, so your attached properties for canvas positioning in the StackPanel will be ignored.

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.Top" Value="{Binding Top}" />
        <Setter Property="Canvas.Left" Value="{Binding Left}" />
    </Style>
</ItemsControl.ItemContainerStyle>

---

Edit: If Silverlight does not support ItemContainerStyle you can set the universal style for ContentPresenters which should work just as well:

    <ItemsControl ItemsSource="{Binding Data}">
        <ItemsControl.Resources>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding Left}"/>
                <Setter Property="Canvas.Top" Value="{Binding Top}"/>
            </Style>
        </ItemsControl.Resources>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

这篇关于帆布绑定在silverlight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！