画布上的列表框项目在中心缩放答案

【问题标题】：Listbox items on canvas scaling on center画布上的列表框项目在中心缩放
【发布时间】：2014-02-03 01:17:49
【问题描述】：

我正在尝试将列表框项目的示例拼凑在一起（通过画布呈现）单击时会扩大大小。我很近，但是缩放时项目会移动，我希望它们从中心缩放并保持原位。这是样本数据收集。

public class Item
{
    public double X { get; set; }
    public double Y { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
}

public class ItemsFactory
{
    private List<Item> items;
    public IEnumerable<Item> Items
    {
        get
        {
            return items ?? (items = new List<Item>() 
            { 
                new Item { Name = "One", X = 100, Y = 100, Color="Red" },
                new Item { Name = "Two", X = 88, Y = 210, Color="Green" },
                new Item { Name = "Three", X = 200, Y = 295, Color="Blue" }
            });
        }
    }
}

下面是我的 WPF。单击时项目会变大，但它们也会移动。我在各个地方都尝试过RenderTransformOrigin，但都没有运气。

<Window x:Class="WPFCards.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFCards"
        Title="MainWindow" Height="395.268" Width="607.807" Background="Black" WindowStyle="None" WindowState="Maximized">
    <Window.Resources>
        <local:ItemsFactory x:Key="sampleItems" />
    </Window.Resources>
    <Grid DataContext="{StaticResource sampleItems}">
        <ListBox ItemsSource="{Binding Items}" 
                 Background="Black"
                 SelectionMode="Multiple" >

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="st" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}" />
                        </Canvas.RenderTransform>
                        <Grid 
                            Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}">
                            <Ellipse Fill="{Binding Color}" Width="50" Height="40" />
                            <ContentPresenter Content="{Binding Name}" 
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center" />
                        </Grid>
                    </Canvas>
                    <DataTemplate.Resources>
                        <CubicEase x:Key="ease" EasingMode="EaseOut"/>
                    </DataTemplate.Resources>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="0:0:0.3"
                                            EasingFunction="{StaticResource ease}"
                                            Storyboard.TargetName="st"
                                            Storyboard.TargetProperty="ScaleX"
                                            To="2"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="0:0:0.3"
                                            EasingFunction="{StaticResource ease}"
                                            Storyboard.TargetName="st"
                                            Storyboard.TargetProperty="ScaleX"
                                            To="1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>
    </Grid>
</Window>

【问题讨论】：

标签： c# wpf xaml canvas listbox

【解决方案1】：

RenderTransform 应该应用于椭圆容器，即网格，而不是 Canvas。在画布上设置它会增加网格的宽度和高度，从而影响椭圆的布局。

此外，如果您想要中心缩放，请在网格上设置 RenderTransformOrigin="0.5,0.5"。

<Canvas>
   <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" 
         RenderTransformOrigin="0.5,0.5">
      <Grid.RenderTransform>
         <ScaleTransform x:Name="st"
                         ScaleY="{Binding ScaleX,
                                         RelativeSource={RelativeSource Self}}"/>
      </Grid.RenderTransform>
      <Ellipse Fill="{Binding Color}" Width="50" Height="40" />
      <ContentPresenter Content="{Binding Name}" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center" />
   </Grid>
</Canvas>

【讨论】：

【解决方案2】：

有点猜测：我认为你应该设置

RenderTransformOrigin="0.5,0.5"

你的画布

【讨论】：