tags:

views:

22

answers:

1

Hi, 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. Any advance. Thank you. Sory for my english.

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>
                                    <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>
+2  A: 

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>
Kris
Kris thank you very much, your advance was very helpful.
Tom
If an answer solves your problem, a nice way of saying thank you is to mark the question as the answer ;)
Val