webentwicklung-frage-antwort-db.com.de

So ändern Sie die Farbe des ausgewählten ListView-Elements [WP8.1]

Ich arbeite an einem C # -Projekt für Windows Phone 8.1 und kann nicht glauben, dass ich bereits fast einen Tag damit verbracht habe, nach einer Lösung für ein so triviales Problem zu suchen:

Ich habe eine Seite mit XAML definiert, auf dieser Seite habe ich eine ListView. Irgendwann möchte ich, dass eines der Listenansichtselemente ausgewählt wird, also rufe ich myListView.SelectedIndex = whatever auf. Jetzt möchte ich, dass dieses Element visuell von anderen Elementen unterschieden wird. Beispielsweise soll der Text mit einer anderen Farbe gezeichnet werden. Wie mache ich das? Hier sind die relevanten Teile des Codes:

<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>

Ist das mit XAML alleine möglich? Oder kann im C # -Code getan werden, nur wenn ich myListView.SelectedIndex-Wert festlegen?

Vielen Dank!

12

K, Andrei Ich finde die Lösungen ganz gut, sie sind nur fehlerhaft. Hier ist mein.

XAML: Achten Sie auf 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 # (Ein Beispielmodell)

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;
}

Screenshot davon läuft:

enter image description here

26

Sie müssen einen Stil für Ihr ListBoxItem erstellen und Storyboards verwenden.

Hier ist ein Beispiel:

  <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>

Und die Definition der Listenansicht:

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

Versuchen Sie dies, hoffe, es kann Ihnen helfen.

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

Ja, Sie müssen einen Stil mit einem Auslöser für die ausgewählte Eigenschaft festlegen. Es ist zu empfehlen, den Code auf meinem Handy einzugeben, aber eine schnelle Google-Suche zeigt Ihnen eine Menge Beispiele oder hier: ListBox Style Ausgewähltes Element auf Windows Phone

0
Steve

Sie können Ihrer Klasse eine boolesche Variable IsSelected hinzufügen und in eine Hintergrundfarbe konvertieren. Zum Beispiel:

   <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

Sie müssen nur Folgendes zu App.xaml hinzufügen

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

Die "Hex-Farbe" ist die ausgewählte Objektfarbe in einer ListView im Anwendungsbereich

0
user3249850