路径不正确的位置使用绑定当填充路径上的数据属性 [英] Path Position Incorrect When Using Bindings To Populate Paths Data Attribute

查看：104
本文介绍了路径不正确的位置使用绑定当填充路径上的数据属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个画布里面一个硬编码路径形状。我想有这种帆布内的多个形状，所以我想每个形状的信息推到一个类，然后使用的ItemsControl 来呈现每个之一。当我使用的ItemsControl ，每个形状是​​一个不正确的位置（太远了和左）。



< STRONG>显示正确 

 <&帆布GT; 
<路径样式={StaticResource的OverlayPath}
 HEIGHT =87.934
 WIDTH =96.067
 Canvas.Left =348.456
画布。 TOP =204.525
数据=M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584,230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564,218.33797 354.38926,226.20365 348.38853,227.80345 348.52187， 233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429,275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228,249.8258 420.92226,244.72642 423.52258,243.02663 428.92323， 242.82666 Z/> 
< /帆布>



显示不正确 



 <&帆布GT; 
<的ItemsControl的ItemsSource = {结合CanvasPaths}> 
< ItemsControl.ItemTemplate> 
<&DataTemplate的GT; 
<路径样式={StaticResource的OverlayPath}
数据={绑定数据}
 HEIGHT ={结合身高}
 WIDTH ={结合宽度} 
 Canvas.Left ={结合CanvasLeft}
 Canvas.Top ={结合CanvasTop}/> 
< / DataTemplate中> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl的> 
< /帆布>



型号 



 公共类CanvasPath 
 {
公共Can​​vasPath（字符串数据，双高，双宽，双canvasTop，双canvasLeft）
 {
数据=数据; 
高度=高度; 
宽度=宽度; 
 CanvasTop = canvasTop; 
 CanvasLeft = canvasLeft; 
} 
 
公共字符串数据{搞定;组; } 
公共双倍高度{搞定;组; } 
公共双宽度{搞定;组; } 
公共双CanvasTop {搞定;组; } 
公共双CanvasLeft {搞定;组; } 
}



视图模型 



 公共类TestViewModel 
 {
私人的ObservableCollection< CanvasPath>测试=新的ObservableCollection< CanvasPath>（）
 {
新CanvasPath（M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584， 230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564 ，218.33797 354.38926,226.20365 348.38853,227.80345 348.52187,233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429， 275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228 ，249.8258 420.92226,244.72642 423.52258,243.02663 428.92323,242.82666 Z，
 87.934，96.067，204.525，348.456）
}; 
 
公众的ObservableCollection< CanvasPath> CanvasPaths 
 {
得到
 {
返回测试; 
} 
} 
}


解决方案

的 Canvas.Left 和 Canvas.Top 在的ItemTemplate 没有任何效果，因为在DataTemplate中的路径控制不具备画布的父。



为了让它工作，你就必须设置 ItemsPanel 和 ItemContainerStyle 这样的特性：

 <的ItemsControl的ItemsSource ={结合CanvasPaths}> 
< ItemsControl.ItemsPanel> 
< ItemsPanelTemplate> 
<帆布/> 
< / ItemsPanelTemplate> 
< /ItemsControl.ItemsPanel> 
< ItemsControl.ItemContainerStyle> 
<风格的TargetType =ContentPresenter> 
< setter属性=Canvas.LeftVALUE ={结合CanvasLeft}/> 
< setter属性=Canvas.TopVALUE ={结合CanvasTop}/> 
< /样式和GT; 
< /ItemsControl.ItemContainerStyle> 
< ItemsControl.ItemTemplate> 
<&DataTemplate的GT; 
<路径样式={StaticResource的OverlayPath}
数据={绑定数据}
 HEIGHT ={结合身高}
 WIDTH ={结合宽度} /> 
< / DataTemplate中> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl的>


I have a hard coded Path shape inside of a Canvas. I want to have multiple shapes inside this canvas so I'm trying to shove the information of each shape into a class and then use an ItemsControl to render each one. When I use the ItemsControl, each shape is in a incorrect location (Too far up and left).

Displays Correctly

<Canvas>
    <Path Style="{StaticResource OverlayPath}" 
              Height="87.934" 
              Width="96.067" 
              Canvas.Left="348.456" 
              Canvas.Top="204.525" 
              Data="M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584,230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564,218.33797 354.38926,226.20365 348.38853,227.80345 348.52187,233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429,275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228,249.8258 420.92226,244.72642 423.52258,243.02663 428.92323,242.82666 z" />
</Canvas>

Displays Incorrectly

<Canvas>
    <ItemsControl ItemsSource={Binding CanvasPaths}>
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                    <Path Style="{StaticResource OverlayPath}" 
                          Data="{Binding Data}" 
                          Height="{Binding Height}" 
                          Width="{Binding Width}" 
                          Canvas.Left="{Binding CanvasLeft}" 
                          Canvas.Top="{Binding CanvasTop}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
 </Canvas>

Model

public class CanvasPath
{
    public CanvasPath(string data, double height, double width, double canvasTop, double canvasLeft)
    {
        Data = data;
        Height = height;
        Width = width;
        CanvasTop = canvasTop;
        CanvasLeft = canvasLeft;
    }

    public string Data { get; set; }
    public double Height { get; set; }
    public double Width { get; set; }
    public double CanvasTop { get; set; }
    public double CanvasLeft { get; set; }
}

ViewModel

public class TestViewModel
{
    private ObservableCollection<CanvasPath> test = new ObservableCollection<CanvasPath>()
    {
        new CanvasPath("M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584,230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564,218.33797 354.38926,226.20365 348.38853,227.80345 348.52187,233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429,275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228,249.8258 420.92226,244.72642 423.52258,243.02663 428.92323,242.82666 z",
                87.934, 96.067, 204.525, 348.456)
    };

    public ObservableCollection<CanvasPath> CanvasPaths
    {
        get 
        {
            return test;
        }
    }
}

解决方案

The Canvas.Left and Canvas.Top bindings in your ItemTemplate have no effect, because the Path control in the DataTemplate does not have a Canvas parent.

In order to make it work you would have to set the ItemsPanel and ItemContainerStyle properties like this:

<ItemsControl ItemsSource="{Binding CanvasPaths}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding CanvasLeft}"/>
            <Setter Property="Canvas.Top" Value="{Binding CanvasTop}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Style="{StaticResource OverlayPath}" 
                  Data="{Binding Data}" 
                  Height="{Binding Height}" 
                  Width="{Binding Width}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这篇关于路径不正确的位置使用绑定当填充路径上的数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆