2

Necesito crear un control de tipo lista que cumpla con los siguientes requisitos:

  • Mostrar un icono eliminar justo al lado del texto de cada ítem.
  • Debe de mostrar en horizontal los elementos agregados.
  • Al pulsar en el icono eliminar, el control debe ser capaz eliminarlo del ItemsSource, y estos cambios deben de ser reflejados también a la propiedad a la que esté enlazada el ItemsSource.
  • Debe de funcionar siempre, independientemente del tipo enlazado a la propiedad ItemsSource del control.

Para ello he realizado un custom control que hereda de listview:

Imports System.Windows.Controls.Primitives
Imports System.Reflection

Public Class ListCustomControl
Inherits System.Windows.Controls.ListView

Shared Sub New()
    'Esta llamada a OverrideMetadata indica al sistema que este elemento desea proporcionar un estilo diferente al de su clase base.
    'Este estilo se define en themes\generic.xaml
    DefaultStyleKeyProperty.OverrideMetadata(GetType(ListCustomControl), New FrameworkPropertyMetadata(GetType(ListCustomControl)))
End Sub

Public Overrides Sub OnApplyTemplate()
    MyBase.OnApplyTemplate()
End Sub

Private Sub ListCustomControl_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    AddHandler MyBase.PreviewMouseLeftButtonDown, AddressOf OnPreviewMouseLeftButtonDown
End Sub

Private Overloads Sub OnPreviewMouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs)
    If e.OriginalSource.GetType Is GetType(Controls.Image) Then
        CType(Me.ItemsSource, IList).Remove(CType(e.OriginalSource, Image).DataContext)
    End If
End Sub
End Class 

He aquí el generic.xaml asociado a ListCustomControl:

<Style TargetType="{x:Type local:ListCustomControl}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ListCustomControl}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                    <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate" >
        <Setter.Value>
            <DataTemplate x:Name="ItemTemplate">
                <Border x:Name="Border"
                    Padding="2"
                    CornerRadius="5"
                    HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid x:Name="LayoutGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label x:Name="LabelText"
                            Grid.Column="0"
                            Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LabelTextColor}"
                            Content="{Binding Name}" 
                            Padding="2,0,2,0"
                            FontStyle="Italic" />
                        <Border x:Name="PART_IconBorder"
                            Grid.Column="1"
                            BorderThickness="1"
                            Background="White" 
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            BorderBrush="White">
                            <Image x:Name="Icon"
                            Stretch="None"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" 
                            Source="/ListCustomControl;component/Resources/Images/delete.gif" />
                        </Border>
                    </Grid>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Todo funciona cumpliendo los requisitos solicitados, pero me queda una duda:

¿Cómo podría hacer para que el content del labeltext funcionara contra la propiedad DisplayMemberPath de ListCustomControl en lugar de estar obligado a enlazarlo a la propiedad name como está ahora?

0

1 respuesta 1

1

Deberías usar algo como esto:

<Label Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListCustomControl}}, Path=DisplayMemberPath}"/>

Lo que hace es buscar al contenedor superior que coincide con el tipo 'ListCustomControl' y toma su propiedad 'DisplayMemberPath', siempre que esté definida ahí, sino no mostrará nada.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.