Wie Standardstile aus Telerik rad Tilelist Steuerelement in WPF entfernen?

Question

Ich habe eine Rad Kachel Liste Kontrolle in meinem Fenster Präsentation Stiftung Anwendung. Ich möchte den Rahmen auf der Maus entfernen, der standardmäßig mit diesem Steuerelement ist und möchte meinen eigenen Hover-Effekt anwenden, und ich möchte auch mouse down-Ereignis auslösen, wenn Benutzer auf ein Kachel-Listenelement von Tablet oder einem Touch-Gerät klicken, das ich umleiten kann dies zu einer anderen Seite.

<telerik:RadTileList> 
<ie:Interaction.Triggers> 
     <ie:EventTrigger EventName="SelectionChanged"> 
      <ie:InvokeCommandAction Command="{Binding homeTileListSelectedItemChangedCommand}" > 
       <ie:InvokeCommandAction.CommandParameter> 
        <MultiBinding> 
         <MultiBinding.Converter> 
          <app:TechnicianConverterHome></app:TechnicianConverterHome> 
         </MultiBinding.Converter> 
         <Binding ElementName="horizontalListBox" /> 
         <Binding ElementName="HomeUserControl" /> 
        </MultiBinding> 
       </ie:InvokeCommandAction.CommandParameter> 
      </ie:InvokeCommandAction> 
     </ie:EventTrigger> 
    </ie:Interaction.Triggers> 
</telerik:RadTileList> 

Answer 1

Hallo Meiner Meinung nach gibt es nur die eine Möglichkeit, ein Standardverhalten des Steuerelements zu ändern. Um dies zu tun, müssen Sie die Standard-ControlTemplate des Controls ändern. Die Elemente in der RadTileList-Steuerelementauflistung von Ansichten sind vom Typ Tile. Lassen Sie uns also die Tile ControlTemplate ändern und definieren Sie statt eines Standards die gewünschten Effekte.

XAML-Code

<Style TargetType="telerik:Tile" BasedOn="{StaticResource {x:Type telerik:Tile}}"> 
        <Setter Property="Background" Value="Tomato"/> 
        <Setter Property="flowConfiguration:TileAttachedProperties.IsTyleTypeBound" Value="True"/> 
        <!--these events wil be handled in .xaml.cs file--> 
        <EventSetter Event="TouchDown" Handler="TouchDown_OnHandler"/> 
        <EventSetter Event="MouseDown" Handler="MouseDown_OnHandler"/> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate> 
           <Grid x:Name="TileRootPanel" Background="{TemplateBinding Background}" Margin="10" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Stretch"> 
            <Grid x:Name="ContentVisual" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
             <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              Content="{Binding 
              RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:Tile}}, 
              Path=Content, UpdateSourceTrigger=PropertyChanged}" 
              ContentTemplateSelector="{StaticResource TileContentTemplateSelectorKey}"/> 
            </Grid> 
            <Border x:Name="SelectedVisual" Visibility="Collapsed" BorderThickness="1" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
             <Grid Margin="0" x:Name="SelectedSymbol" Background="Blue" 
                 HorizontalAlignment="Right" 
                 VerticalAlignment="Bottom" Width="20" Height="20"> 
              <TextBlock Text="!" FontWeight="Bold" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
             </Grid> 
            </Border> 
            <Border x:Name="MouseOverVisual" Margin="0" 
              Visibility="Collapsed" BorderThickness="1" 
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
           </Grid> 
           <ControlTemplate.Triggers> 
            <Trigger Property="telerik:Tile.IsMouseOver" Value="True"> 
             <Setter Property="Border.BorderBrush" TargetName="MouseOverVisual" Value="GreenYellow"/> 
             <Setter Property="Border.Visibility" TargetName="MouseOverVisual" Value="Visible"/> 
             <Setter Property="Border.BorderThickness" TargetName="MouseOverVisual" Value="1.5"/> 
            </Trigger> 
            <Trigger Property="telerik:Tile.IsMouseOver" Value="False"> 
             <Setter Property="Border.BorderBrush" TargetName="MouseOverVisual" Value="Transparent"/> 
             <Setter Property="Border.Visibility" TargetName="MouseOverVisual" Value="Collapsed"/> 
            </Trigger> 
            <Trigger Property="telerik:Tile.IsSelected" Value="True"> 
             <Setter Property="Border.BorderBrush" TargetName="SelectedVisual" Value="Blue"/> 
             <Setter Property="Border.BorderThickness" TargetName="SelectedVisual" Value="2.5"/> 
             <Setter Property="Grid.Visibility" TargetName="SelectedVisual" Value="Visible"/> 
            </Trigger> 
            <Trigger Property="telerik:Tile.IsSelected" Value="False"> 
             <Setter Property="Border.BorderBrush" TargetName="SelectedVisual" Value="Transparent"/> 
             <Setter Property="Grid.Visibility" TargetName="SelectedVisual" Value="Collapsed"/> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 

Modell und Ansichtsmodell Code

public class TileReTemplateTestViewModel:Screen 
{ 
    private ObservableCollection<ItemTypeWrapper> _items; 

    public TileReTemplateTestViewModel() 
    { 
     _items = new ObservableCollection<ItemTypeWrapper>(GetInitializedItemCollection()); 
     DisplayName = "Test"; 
    } 

    private List<ItemTypeWrapper> GetInitializedItemCollection() 
    { 
     var doubles = new List<ItemType> 
     { 
      ItemType.Mail, ItemType.Weather 
     }; 
     var items = Enum.GetValues(typeof (ItemType)) 
      .OfType<ItemType>() 
      .Select(type => new ItemTypeWrapper {ItemType = type}).ToList(); 
     items.ForEach(wrapper => 
     { 
      wrapper.IsDouble = doubles.Contains(wrapper.ItemType); 
     }); 
     return items; 
    } 

    public ObservableCollection<ItemTypeWrapper> Items 
    { 
     get { return _items; } 
    } 
} 

public class ItemTypeWrapper:PropertyChangedBase 
{ 
    private ItemType _itemType; 
    private bool _isDouble; 

    public ItemType ItemType 
    { 
     get { return _itemType; } 
     set 
     { 
      _itemType = value; 
      NotifyOfPropertyChange(() => ItemType); 
     } 
    } 

    public bool IsDouble 
    { 
     get { return _isDouble; } 
     set 
     { 
      _isDouble = value; 
      NotifyOfPropertyChange(()=>IsDouble); 
     } 
    } 
} 

public enum ItemType 
{ 
    Mail, 
    Market, 
    Contacts, 
    Weather, 
} 

Helfer

public class TileAttachedProperties 
{ 
    public static readonly DependencyProperty IsTyleTypeBoundProperty = DependencyProperty.RegisterAttached(
     "IsTyleTypeBound", 
     typeof (bool), 
     typeof (TileAttachedProperties), 
     new PropertyMetadata(default(bool), IsTyleBoundPropertyChangedCallback)); 

    private static void IsTyleBoundPropertyChangedCallback(DependencyObject sender, DependencyPropertyChangedEventArgs args) 
    { 
     var tile = sender as Tile; 
     var isBound = (bool) args.NewValue; 
     if(tile == null || isBound == false) return; 
     tile.Loaded += TileOnLoaded; 
    } 

    private static void TileOnLoaded(object sender, RoutedEventArgs routedEventArgs) 
    { 
     var tile = sender as Tile; 
     if (tile == null) return; 
     tile.Loaded -= TileOnLoaded; 

     var tileContent = tile.Content; 
     if (tileContent == null || tileContent is ItemTypeWrapper == false) return; 

     var binding = new Binding("IsDouble"); 
     binding.Source = tileContent; 
     binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
     binding.Converter = new Bool2TileTypeConverter(); 
     tile.SetBinding(Tile.TileTypeProperty, binding); 

    } 

    public static void SetIsTyleTypeBound(DependencyObject element, bool value) 
    { 
     element.SetValue(IsTyleTypeBoundProperty, value); 
    } 

    public static bool GetIsTyleTypeBound(DependencyObject element) 
    { 
     return (bool) element.GetValue(IsTyleTypeBoundProperty); 
    } 
} 

internal class Bool2TileTypeConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var isDouble = (bool) value; 
     return isDouble ? TileType.Double : TileType.Single; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

class TileContentTemplateSelector : DataTemplateSelector 
{ 
    public DataTemplate Mail { get; set; } 
    public DataTemplate Market { get; set; } 
    public DataTemplate Contacts { get; set; } 
    public DataTemplate Weather { get; set; } 


    public override DataTemplate SelectTemplate(object item, DependencyObject container) 
    { 
     DataTemplate dataTemplate; 
     var model = item as ItemTypeWrapper; 
     if (model == null) 
      return null; 
     var key = model.ItemType; 
     switch (key) 
     { 
      case ItemType.Mail: 
       dataTemplate = Mail; 
       break; 
      case ItemType.Market: 
       dataTemplate = Market; 
       break; 
      case ItemType.Contacts: 
       dataTemplate = Contacts; 
       break; 
      case ItemType.Weather: 
       dataTemplate = Weather; 
       break; 
      default: 
       throw new ArgumentOutOfRangeException(); 
     } 
     return dataTemplate; 
    } 
} 

Wie Schaut es, wie:

Grüße,