Zoom sur l'élément de la liste déroulante

Question

Je suis débutant dans WPF. J'ai ce problème. Je lie les éléments de la liste do listBox. J'ai propre style sur la liste. L'élément ListBox consiste en Image et textBlocks. Cela fonctionne bien. J'ai besoin de faire un zoom sur l'élément listBox lorsque la souris est sur cet élément. J'essaie d'utiliser des déclencheurs, mais je ne sais pas comment puis-je redimensionner l'élément listBox.

code 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(); 
     } 
    } 
} 

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

Code App.xaml - style listbox

<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

Vous pouvez modifier la taille d'un élément en fixant son RenderTransform ou LayoutTransform. Votre déclencheur IsMouseOver est presque ce dont vous avez besoin, mais cela affecterait l'ensemble de ListBox que vous voulez dans DataTemplate ou ItemContainerStyle.

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