in

Utah .NET User Group

Home of Utah's professional .NET developers.

Joe's Blog

June 2007 - Posts

  • Changing a ListBox's Selection Style

    When you want to change the default selection style on a ListBox it's fairly straight forward. All you need to do is create a control template and use triggers to set values when IsSelected is true.

    Custom ListBox Selection Style

    <Style TargetType="ListBoxItem">

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="ListBoxItem">

            <Border x:Name="ItemBorder"

                    BorderBrush="Black"

                    Background="LightGray"

                    BorderThickness="2"

                    CornerRadius="4"

                    Margin="3">

              <ContentPresenter Margin="2" />

            </Border>

            <ControlTemplate.Triggers>

              <Trigger Property="IsSelected" Value="True">

                <Setter TargetName="ItemBorder"

                        Property="BorderBrush"

                        Value="Red"/>

              </Trigger>

              <Trigger Property="IsMouseOver" Value="True">

                <Setter TargetName="ItemBorder"

                        Property="BorderBrush"

                        Value="Blue" />

              </Trigger>

              <MultiTrigger>

                <MultiTrigger.Conditions>

                  <Condition Property="IsMouseOver" Value="False" />

                  <Condition Property="IsSelected" Value="False" />

                </MultiTrigger.Conditions>

                <Setter TargetName="ItemBorder"

                        Property="Opacity"

                        Value="0.50" />

              </MultiTrigger>

            </ControlTemplate.Triggers>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

     

    <ListBox>

      <ListBoxItem>One</ListBoxItem>

      <ListBoxItem>Two</ListBoxItem>

      <ListBoxItem>Three</ListBoxItem>

      <ListBoxItem>Four</ListBoxItem>

      <ListBoxItem>Five</ListBoxItem>

      <ListBoxItem>Six</ListBoxItem>

      <ListBoxItem>Seven</ListBoxItem>

      <ListBoxItem>Eight</ListBoxItem>

    </ListBox>

    Posted Jun 11 2007, 11:30 AM by Joe's Blog
    Filed under:
Copyright © 2000-2007, Utah .NET User Group
Powered by Community Server (Commercial Edition), by Telligent Systems