I am newbie in WPF. I have this problem. I binding list items do listBox. I have own style on listbox. ListBox item consist Image and textBlocks. It works good. I need make zoom on listBox item when mouse is over on this item. I try use triggers, but I don’t know how can I resize listBox item.
C# code:
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 code:
<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 code - listbox style
<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>
开发者_如何学Python <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>
You can change the size of an element by setting its RenderTransform or LayoutTransform. Your IsMouseOver trigger is nearly what you need however that would effect the whole ListBox you want it in the DataTemplate or 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>
精彩评论