Question

我是WPF的新手。我有这个问题。我绑定列表项做listBox。我在列表框上有自己的风格。 ListBox项包含Image和textBlocks。它运作良好。鼠标悬停在此项目上时，我需要对listBox项目进行缩放。我尝试使用触发器，但我不知道如何调整listBox项目的大小。

C＃代码：

namespace ListBoxStyle
{
    public partial class MainWindow : Window
    {
        public class User {

            public String Id { get; set; }
            public Boolean IsFriend { get; set; }
            public Uri ImageUri { get; set; }

            public User(String azetId, Boolean isFriend, string imageUri)
            {
                Id = azetId;
                IsFriend = isFriend;
                ImageUri = new Uri(imageUri);
            }

            public override string ToString()
            {
                return Id;
            }
        }

        public static class Users
        {
            public static IEnumerable<User> GetUsers()
            {
                var users = new List<User> {
                            new User("Id1",false,@"http://213.215.107.127/fotky/1751/34/v_17513478.jpg?v=2"),
                            new User("Id2",false,@"http://213.215.107.125/fotky/1786/21/v_17862148.jpg?v=2"),
                            new User("Id3",false,@"http://213.215.107.127/fotky/1546/53/15465356.jpg?v=2"),
                            new User("Id4",false,@"http://213.215.107.125/fotky/1811/29/18112909.jpg?v=1"),};
                return users;
            }
        }
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = Users.GetUsers();
        }
    }
}

Window.xaml代码：

  <Window x:Class="ListBoxStyle.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Pokec messanger" Height="400" Width="300">
        <Grid ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="20"></RowDefinition>
            </Grid.RowDefinitions>
            <ListBox Name="friendList" ItemsSource="{Binding}" Grid.Column="0" Grid.Row="1" Style="{StaticResource friendListStyle}"/>
        </Grid>
    </Window>

App.xaml代码 - 列表框样式

<Application x:Class="ListBoxStyle.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="friendListStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid Name="MainGrid" ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.45*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Image Source="{Binding ImageUri}"/>
                            <Grid Name="SlaveGrid" ShowGridLines="true" Grid.Column="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <TextBlock Name="tbId" Text="{Binding Id}" Grid.Column="0" Grid.Row="0" Margin`enter code here`="5,5,5,5" FontSize="14"></TextBlock>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="FontSize" Value="20"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Application.Resources>
</Application>

Answer 1

您可以通过设置其RenderTransform或LayoutTransform来更改元素的大小。你的IsMouseOver触发器几乎就是你所需要的，但是它会影响你想要它在DataTemplate或ItemContainerStyle中的整个ListBox。

<Style x:Key="friendListStyle" TargetType="{x:Type ListBox}">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Name="MainGrid" ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.45*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding ImageUri}"/>
                    <Grid Name="SlaveGrid" ShowGridLines="true" Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Name="tbId" Text="{Binding Id}" Grid.Column="0" Grid.Row="0" Margin="5,5,5,5" FontSize="14"></TextBlock>
                    </Grid>
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="LayoutTransform" TargetName="MainGrid">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

放大列表框项目

1 个答案: