Question

我正在尝试拼凑一个（通过画布渲染）列表框项目的示例，这些项目在单击时会扩展。我很近，但物品在放大时移动，我希望它们从中心放大并保持原位。这是样本数据集。

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>

Answer 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>

Answer 2

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

RenderTransformOrigin = “0.5,0.5”

你的画布的

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

2 个答案: