Solved

ListboxItem Layout based on listbox width/select style

Posted on 2010-09-14
5
620 Views
Last Modified: 2013-11-12
Hi All,

is it possible to set listboxitem layout based on listbox layout? attached you find an example of what i'd like to reach

listbox with 3 label:
1 select char: I'd like do not have the normal select style, no background color change
2 text
3 text right aligned

is it possible? wanted layout
0
Comment
Question by:Lukino2000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
5 Comments
 
LVL 29

Expert Comment

by:Gautham Janardhan
ID: 33674443
see sample xaml and code
<Grid>

        <Grid.Resources>
            <local:MyConverter x:Key="temp"/>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
            </Style>
        </Grid.Resources>
        <ListBox x:Name="temp" SelectedItem="{Binding SelectedItem}">
            <ListBox.Style>
                <Style TargetType="{x:Type ListBox}">
                    <Style.Resources>
                        <!-- Background of selected item when focussed -->
                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White" />
                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
                    </Style.Resources>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBox">
                                <Border CornerRadius="5" Background="{TemplateBinding ListBox.Background}">
                                    <ScrollViewer HorizontalScrollBarVisibility="Auto">
                                        <StackPanel Orientation="Vertical"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       IsItemsHost="True"/>
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.Style>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Width="25" Text=">" Visibility="{Binding Mode=TwoWay, Path=IsSelected,Converter={StaticResource temp}}"/>
                        <TextBlock Width="75" Text="{Binding Name}"/>
                        <TextBlock Width="75" HorizontalAlignment="Right" Text="{Binding Value}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>

    </Grid>

Open in new window

0
 
LVL 29

Expert Comment

by:Gautham Janardhan
ID: 33674447
code behind
temp.DataContext = this;

            temp.ItemsSource = new List<object>()
            {
                new Item{ Name ="4PB" ,Value =12,IsSelected = false},
                new Item{ Name ="4B" ,Value =19,IsSelected = false },
                new Item {Name ="M12B" ,Value =3,IsSelected = false }
            };



public class Item :INotifyPropertyChanged
    {

        private bool _isSelected;
        public bool IsSelected
        {
            get
            {
                return _isSelected;
            }
            set
            {
                _isSelected = value;
                NotifyPropertyChanged("IsSelected");
            }
        }

        private int _value;
        public int Value
        {
            get
            {
                return _value;
            }
            set
            {
                _value = value;
                NotifyPropertyChanged("Value");
            }
        }
        private string _name;
        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }

        private void NotifyPropertyChanged(string p)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(p));
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion
    }

    public class MyConverter : IValueConverter
    {

        #region IValueConverter Members



        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            return ((bool)value) ? Visibility.Visible : Visibility.Hidden;

        }



        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            throw new NotImplementedException();

        }



        #endregion

    }

Open in new window

0
 

Author Comment

by:Lukino2000
ID: 33704341
Sorry gauthampj,

your solution would work but it has hardcoded the width of elements. Can you provide please a solution that adapts itself at the width of listbox?
0
 
LVL 29

Expert Comment

by:Gautham Janardhan
ID: 33704390
are you talking about the width of the text blocks ?
0
 
LVL 29

Accepted Solution

by:
Gautham Janardhan earned 500 total points
ID: 33704431
if so then replace the template with this
<DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text=">" Visibility="{Binding Mode=TwoWay, Path=IsSelected,Converter={StaticResource temp}}"/>
                        <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                        <TextBlock Grid.Column="2" HorizontalAlignment="Right" Text="{Binding Value}"/>
                    </Grid>
                </DataTemplate>

Open in new window

0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For a while now I'v been searching for a circular progress control, much like the one you get when first starting your Silverlight application. I found a couple that were written in WPF and there were a few written in Silverlight, but all appeared o…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question