web-dev-qa-db-ja.com

選択したListViewアイテムの色を変更する方法[WP8.1]

私はWindowsPhone 8.1用のC#プロジェクトに取り組んでいますが、このような些細な問題の解決策を探すのに1日近く無駄になっているとは信じられません。

XAMLで定義されたページがあり、そのページにListViewがあります。ある時点で、リストビューアイテムの1つを選択したいので、myListView.SelectedIndex = whateverを呼び出します。次に、そのアイテムを他のアイテムと視覚的に区別して、たとえば、テキストを別の色で描画したいと思います。それ、どうやったら出来るの?コードの関連部分は次のとおりです。

<Page.Resources>
    <DataTemplate x:Key="myListItemTemplate">
        <TextBlock 
            Text="{Binding displayName}" 
            Style="{ThemeResource ListViewItemTextBlockStyle}"
            />
   </DataTemplate>
</Page.Resources>

<ListView 
    x:Name="myListView" 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource myListItemTemplate}" 
    >
</ListView>

XAMLだけで可能ですか?または、myListView.SelectedIndex値を設定したときに、C#コードで実行できますか?

ありがとう!

12

K、Andrei提供されたソリューションは非常に優れていると思いますが、バグがあります。これが私のものです。

XAML:SelectedUnfocusedに注意してください


    <ListView x:Name="mylistview">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">                    
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">                                
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">                                                
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="myback" Background="Transparent">
                                    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </Grid>                                
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Height="100">
                <TextBlock Text="{Binding Artist}" FontSize="22"/>
                <TextBlock Text="{Binding Song}" FontSize="22"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>        

C#(サンプルモデル)

public class sample_data
{
    public sample_data(string artist, string song)
    {
        this.Artist = artist;
        this.Song = song;
    }

    public string Artist { get; set; }
    public string Song { get; set; }
}

private ObservableCollection<sample_data> CreateData()
{
    //List<sample_data> my_list = new List<sample_data>();
    ObservableCollection<sample_data> my_list = new ObservableCollection<sample_data>();

    my_list.Add(new sample_data("Faith + 1", "Body of Christ"));
    my_list.Add(new sample_data("Faith + 1", "Christ Again"));
    my_list.Add(new sample_data("Faith + 1", "A Night With the Lord"));
    my_list.Add(new sample_data("Faith + 1", "Touch Me Jesus"));
    my_list.Add(new sample_data("Faith + 1", "I Found Jesus (With Someone Else)"));
    my_list.Add(new sample_data("Faith + 1", "Savior Self"));
    my_list.Add(new sample_data("Faith + 1", "Christ What a Day"));
    my_list.Add(new sample_data("Faith + 1", "Three Times My Savior"));
    my_list.Add(new sample_data("Faith + 1", "Jesus Touched Me"));
    my_list.Add(new sample_data("Faith + 1", "Lord is my Savior"));
    my_list.Add(new sample_data("Faith + 1", "I Wasn't Born Again Yesterday"));
    my_list.Add(new sample_data("Faith + 1", "Pleasing Jesus"));
    my_list.Add(new sample_data("Faith + 1", "Jesus (Looks Kinda Hot)"));
    my_list.Add(new sample_data("Butters", "What What"));
    return my_list;
}

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    ObservableCollection<sample_data> sd = this.CreateData();
    mylistview.ItemsSource = sd;
}

実行中のスクリーンショット:

enter image description here

26

ListBoxItemのスタイルを作成し、ストーリーボードを使用する必要があります。

ここにサンプルがあります:

  <Page.Resources>
<Style x:Key="ListViewItemTemplate" TargetType="ListViewItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListViewItem">
        <Border x:Name="LayoutRoot">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected">
                <Storyboard>
                  <!-- Define style -->
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Selected">
                <Storyboard>
                  <!-- Define style -->
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="container" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Grid Margin="0,5" x:Name="container" Background="Transparent">
            <!-- Definition of your list item. -->
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

そしてリストビューの定義:

<ListView ItemContainerStyle="{StaticResource ListViewItemTemplate}" SelectionMode="Single" />
0
Rom Eh

これを試してみてください、それがあなたを助けるかもしれないことを願っています。

if (e.AddedItems != null) {
    foreach (var item in e.AddedItems) {
        ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
        if (litem != null) {
            VisualStateManager.GoToState(litem, "Unfocused", true);
            VisualStateManager.GoToState(litem, "Normal", true);
            VisualStateManager.GoToState(litem, "Selected", true);
        }
    }
}
if (e.RemovedItems != null) {
    foreach (var item in e.RemovedItems) {
        ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
        if (litem != null) {
            VisualStateManager.GoToState(litem, "Unselected", true);
        }
    }
}
0
Dinesh

はい、そうです。選択したプロパティにトリガーを使用してスタイルを設定する必要があります。私の電話のコードでは難しいですが、簡単なグーグルでたくさんの例が表示されます: Windows Phoneのリストボックススタイルの選択されたアイテム

0
Steve

クラスにブール変数IsSelectedを追加し、それをbgカラーに変換できます。例えば:

   <DataTemplate>
        <Grid Background="{Binding IsSelected, Converter={StaticResource IsSelectedToBackgroundColorConverter}}">
            <TextBlock Text="{Binding displayName}" 
                       Style="{ThemeResource ListViewItemTextBlockStyle}" />
        </Grid>
   </DataTemplate>

|

class IsSelectedToBackgroundColorConverter: IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, string language)
    {

        bool IsSelected = (bool)value;

        if (IsSelected)
        {
            Windows.UI.Xaml.Media.Brush red = new SolidColorBrush(Windows.UI.Colors.Red);

            return red;
        }
        else
        {
            Windows.UI.Xaml.Media.Brush transparent = new SolidColorBrush(Windows.UI.Colors.Transparent);

            return transparent;
        }

    }

}
0
the_nuts

App.xamlに以下を追加する必要があります

</Application.Resources> <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#92D050" /> <Application.Resources>

「hex-Color」は、アプリケーションスコープのListViewで選択されたアイテムの色になります

0
user3249850