Question

我创建了一个RadCartesianChart来绘制一个条形系列。 xaml代码是：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <telerik:RadCartesianChart x:Name="chart" Width="400" Height="300">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}">
                <telerik:BarSeries.DefaultVisualStyle>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{Binding DataItem.Color}" />
                    </Style>
                </telerik:BarSeries.DefaultVisualStyle>
            </telerik:BarSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

背后的代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {  
        public MainWindow()
        {
            InitializeComponent();
            DataContext = GetData(12);
        }

        public static List<ChartData> GetData(int dataSize)
        {
            Random rnd = new Random();
            var result = new List<ChartData>();

            for (int i = 0; i < dataSize; i++)
            {
                result.Add(new ChartData()
                {
                    Category = i,
                    Value = rnd.Next(1, 100),
                    Color = new SolidColorBrush(
                        Color.FromArgb(255, (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256)))
                });
            }

            return result;
        }
    }

    public class ChartData : INotifyPropertyChanged
    {
        private int _category;
        public int Category
        {
            get { return this._category; }
            set { this._category = value; 
this.OnPropertyChanged("Category"); }
        }

        private double _value;
        public double Value
        {
            get { return this._value; }
            set { this._value = value; this.OnPropertyChanged("Value"); }
        }

        private Brush _color;
        public Brush Color
        {
            get { return this._color; }
            set { this._color = value; this.OnPropertyChanged("Color"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

我的问题是如何将用户控件用作模板？原因是我们有非常相似的情节来绘制。我们是否需要为每个控件创建许多用户控件，或者我们可以创建一个模板来引用它？

我在contentpresenter或ContentControl或ControlTemplate之类的情况下表现不佳。

Answer 1

您可以使用DataTemplate并根据您的要求定义多个数据模板，并根据触发器切换ContentControl的ContentTemplate。

这里我们说我们有一个带ContentControl的XAML文件。

<UserControl.Resources>
    <DataTemplate x:Key="DataTemplate1">
        <!-- your code for control goes here-->
    </DataTemplate>
    <DataTemplate x:Key="DataTemplate2">
        <!-- your code for control goes here-->
    </DataTemplate>
    <Style x:Key="ContentControlStyle" TargetType="{x:Type ContentControl}">
      <!-- Default content for content control would be DataTemplate1 -->
      <Setter Property="ContentTemplate" Value="{StaticResource DataTemplate1}"/>
      <Style.Triggers>
         <DataTrigger Binding="{Binding SomePropertyInViewModel}" Value="YourValue">
            <!-- If SomePropertyInViewModel == YourValue in ViewModel DataTemplate2 will be applied.-->
            <Setter Property="ContentTemplate" Value="{StaticResource DataTemplate2}"/>
         </DataTrigger>
      </Style.Triggers>
    </Style>
</UserControl.Resources>
<ContentControl Style="{StaticResource ContentControlStyle}"/>

让我知道任何进一步的问题。

Answer 2

声明Style，例如App.xaml：

<Style x:Key="myStyle" TargetType="telerik:RadCartesianChart">
    <Setter Property="Width" Value="400" />
    <Setter Property="Width" Value="100" />
    <Setter Property="VerticalAxis">
        <Setter.Value>
            <telerik:LinearAxis/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAxis">
        <Setter.Value>
            <telerik:CategoricalAxis/>
        </Setter.Value>
    </Setter>
    <Setter Property="Series">
        <Setter.Value>
            <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}">
                <telerik:BarSeries.DefaultVisualStyle>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{Binding DataItem.Color}" />
                    </Style>
                </telerik:BarSeries.DefaultVisualStyle>
            </telerik:BarSeries>
        </Setter.Value>
    </Setter>
</Style>

...并使用Style将RadCartesianChart应用于任何x:Key：

<telerik:RadCartesianChart x:Name="chart" Style="{StaticResource myStyle}" />

创建一般用途的模板

2 个答案: