放大列表框項目

Question

我是WPF中的新手。我有這個問題。我綁定列表項目列表框。我在列表框上有自己的風格。列表框項目包括圖像和文本塊。它運作良好。當鼠標在這個項目上結束時，我需要對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>