[wp7] ListBox 선택했을때 Style 바꾸기

보통 리스트 박스에 스타일을 입히기 위해서

<ListBox.ItemTemplate>
  <DataTemplate>

이런게 DataTemplate 을 한다.

하지만 여기서 Select 했을때 특정 컨트롤 색을 바꾸고 싶거나 배경을 없애거나 머 이렇게 하고 싶었다.

블랜드로 하는게 편할거다.

ListBox에서 오른쪽 버튼을 눌러서 ItemContainerStyle을 선택후 edit/copy를 한후

코드에서 selected와 unselected코드 부분을 지웠다.(있어봤자 필요도 없음 어짜피 새로 만들꺼니)

그리고 기본적으로 포함 되어 있는 ContentControl 도 지웠다.

그리고 DataTemplate안에 있는 내용을 그대로 contentControl 를 지운부분에 삽입했다.

최종 xaml 코드이다.

<phone:PhoneApplicationPage.Resources>
        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
                            <Grid Height="106" Width="166">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="126"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Image Source="/GloryApp;component/Images/Ticket_GroupItem_Nor@2x.png" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="151" Height="96" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
                                <Image Grid.ColumnSpan="2" Grid.RowSpan="2" Source="/GloryApp;component/Images/Ticket_GroupItem_Sel@2x.png" Stretch="Fill" Width="151" Height="96" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
                                <Image Source="/GloryApp;component/Images/Ticket_GroupItem_Badge_Green@2x.png" Stretch="Fill" Width="40" Height="40" Grid.Column="1" d:IsHidden="True"/>
                                <Image x:Name="image" Source="/GloryApp;component/Images/Ticket_GroupItem_Badge_Red@2x.png" Stretch="Fill" Width="40" Height="40" Grid.Column="1"/>
                                <TextBlock Text="{Binding TicketCount}" Grid.ColumnSpan="2" VerticalAlignment="Center" FontFamily="Malgun Gothic" Grid.Column="1" HorizontalAlignment="Center" FontSize="22.667" Margin="0,0,0,4" Foreground="White" />
                                <Grid Grid.ColumnSpan="2" Grid.RowSpan="2" d:DesignWidth="183" d:DesignHeight="180" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="151" Height="96" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="34"/>
                                        <RowDefinition Height="24"/>
                                        <RowDefinition Height="27"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="{Binding h_dpt_dt}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Foreground="Black" FontFamily="Malgun Gothic" />
                                    <StackPanel Orientation="Horizontal" d:LayoutOverrides="Height" Grid.Row="1" HorizontalAlignment="Center">
                                        <TextBlock Text="{Binding h_dpt_tm}" Foreground="Black" FontFamily="Malgun Gothic" FontSize="18.667" />
                                        <TextBlock Text="출발" Foreground="Black" FontFamily="Malgun Gothic" FontSize="18.667" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="2" d:LayoutOverrides="VerticalAlignment" HorizontalAlignment="Center">
                                        <TextBlock Text="{Binding h_dpt_rs_stn_nm}" Foreground="Black" FontSize="18.667" FontFamily="Malgun Gothic" />
                                        <TextBlock Text="&gt;" Foreground="Black" FontSize="18.667" FontFamily="Malgun Gothic" />
                                        <TextBlock Text="{Binding h_arv_rs_stn_nm}" Foreground="Black" FontSize="18.667" FontFamily="Malgun Gothic" />
                                    </StackPanel>
                                </Grid>
                            </Grid>

                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

보면 contentControl 대신 dataTemplate에 있는걸 넣었다. 그냥

그뒤 블랜드로 Status를 Selected로 해서 선택했을때에 맞게 조정하면 되는것이다.