首页 文章

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

提问于
浏览
0

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

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>

2 回答

  • 0

    RenderTransform should be applied on ellipse container i.e. Grid 而不是在画布上 . 在画布上设置它会增加网格的宽度和高度,从而影响其中椭圆的布局 .

    此外,如果您想要中心缩放,请在网格上设置 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>
    
  • 1

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

    RenderTransformOrigin =“0.5,0.5”

    你的画布

相关问题