Entwickler-Ecke
WPF / Silverlight - Controls bei MouseOver eines List View Items anzeigen
BRH - Fr 09.05.08 16:54
Titel: Controls bei MouseOver eines List View Items anzeigen
Hallo!
Ich habe ein ListView und möchte, wenn man die Maus über einen der Items bewegt, rechts neben dem Item ein paar Controls (Buttons, Labels, etc.) erscheinen lassen. Über diese sollen dann weitere Optionen für den gewählten Eintrag angewählt werden können.
Weiß jemand wie sich das mit WPF realisieren lässt? Kennt jemand ein passendes Beispiel/Tutorial?
Danke schonmal!
Chryzler - Fr 09.05.08 17:33
Also du musst ja das CellTemplate von GridViewColoumn setzen. Darein machst deine ganze Controls mit IsVisible = false, und dann musst irgendwie mit nem EventSetter bei IsMouseOver des ListViewItems die IsVisible-Eigenschaften der Controls auf true setzen.
Vielleicht gehts auch einfacher, ich weiß es nicht. :)
Kha - Fr 09.05.08 20:06
Vielleicht will er auch ein Popup[meta]Hint: Die Klasse heißt genauso ; )[/meta]? Lässt sich nicht wirklich herauslesen :nixweiss: .
BRH - Sa 10.05.08 01:01
Hi!
Also schon mal danke ;-).
Ich hab euch mir das so vorgestellt:
Ich habe ein paar Items. Bewege ich die Maus darauf erscheinen rechts z.B. Buttons (was genau, weiß ich noch nicht) mit denen ich den Eintrag dann löschen kann. Im Prinzip hört sich das was Christoph geschrieben hat schon ganz gut an. So habe ich mir das auch gedacht. Allerdings komme ich bei der Umsetzung nicht weiter :( .
Hätte jemand vielleicht ein kleines Code-Beispiel? Das wäre echt klasse! :-)
Chryzler - Sa 10.05.08 10:33
Ich bekomms grad auch nicht hin. Du musst jetzt irgendwie dem DataBinding beim Visibility mitteilen, dass er die IsSelected-Eigenschaft von dem entsprechenden ListViewItem benutzen soll. IsMouseOver gibts gar nicht.
XML-Daten
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22:
| <ListView Name="listView"> <ListView.Resources> <BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" /> </ListView.Resources> <ListView.View> <GridView> <GridViewColumn Header="Files" Width="250"> <GridViewColumn.CellTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding FileName}" /> <StackPanel Orientation="Horizontal" Margin="150,0,0,0" Visibility="{Binding Path=IsSelected, Converter={StaticResource booleanToVisibilityConverter}}"> <Button>Edit</Button> <Button>Delete</Button> </StackPanel> </StackPanel> </DataTemplate> </GridViewColumn.CellTemplate> </GridViewColumn> </GridView> </ListView.View> </ListView> |
Kha - Sa 10.05.08 11:02
Hab mal kurz in Blend gewerkelt, das Ergebnis sieht vielversprechend aus.
XML-Daten
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61:
| <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Wpf.Window1" x:Name="Window" Title="Window1" Width="640" Height="480"> <Window.Resources> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="Transparent"/> <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> <Setter Property="Padding" Value="2,0,0,0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Grid Width="620" Height="35"> <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <Popup Placement="Right" IsOpen="{TemplateBinding IsMouseOver}"> <StackPanel Width="80"> <Button Content="Rename"/> <Button Content="Delete"/> </StackPanel> </Popup> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true"/> <Condition Property="Selector.IsSelectionActive" Value="false"/> </MultiTrigger.Conditions> <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> </MultiTrigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>
<Grid x:Name="LayoutRoot"> <ListBox> <ListBox.Items> <ListBoxItem>Bla</ListBoxItem> <ListBoxItem>Blubb</ListBoxItem> </ListBox.Items> </ListBox> </Grid> </Window> |
Das meiste Zeugs wurde einfach von Blends "Edit Template -> Edit a Copy" erstellt, die paar Zeilen für das Popup habe ich markiert. Hab gerade erst gemerkt, dass es um eine List
View geht :angel: , dürfte aber übertragbar sein.
BRH - Sa 10.05.08 11:25
Hey! Super! Genauso hab ich mir das vorgestellt! Vielen Herlichen Dank an euch beide! :-)
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!