WPF'de telerik rad tilelist denetiminin varsayılan stilleri nasıl kaldırılır?

Question

Pencere sunum vakıf Uygulamamda radyans listesi denetimi var. Bu denetimin varsayılanı olan fareyi sınırlamak istiyorum ve kendi hover efektiimi uygulamak istiyorum. Ayrıca, fare tıklatma etkinliğini yükseltmek istiyorum. Böylece kullanıcı tablette bir kiremit listesi öğesini veya yönlendirebileceğim herhangi bir dokunma cihazını tıklattığında Bu başka bir sayfaya.

<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

Merhaba, bence, denetimin varsayılan davranışını değiştirmenin yalnızca bir yolu var. Bunu yapmak için, kontrolün varsayılan ControlTemplate'ını değiştirmeniz gerekir. RadTileList kontrol koleksiyonunun içerisindeki öğeler, Döşeme tipindedir. Bu yüzden Çini ControlTemplate'i değiştirelim ve bir varsayılan yerine istenilen efektleri tanımlayalım.

Xaml kodu

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

Modeli ve ViewModel kodu

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

Yardımcıları

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

nasıl görünmesi gibi: Sen stil şablonları bulmak gerekecek