Question

我的窗口演示基础应用程序中有一个rad tile列表控件。我想删除鼠标上的边框，默认情况下使用此控件并想要应用我自己的悬停效果，我还想提高鼠标按下事件，这样当用户点击平板电脑或任何触摸设备上的图块列表项时，我可以重定向这到另一页。

<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

您好，我认为只有一种方法可以更改控件的默认行为。为此，您必须更改控件的默认ControlTemplate。 RadTileList控件视图集合中的项目是Tile类型。因此，让我们更改Tile ControlTemplate，并定义我们想要的效果而不是默认效果。

Xaml代码

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

模型和ViewModel代码

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

<强>助手

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

它的样子：

此致

如何从wpf中的telerik rad tilelist控件中删除默认样式？

1 个答案: