Question

我编写了一个模板化控件和一个用户控件，当我运行我的应用程序时，它们会一起显示：

但是当我在Xaml上工作时，我没有正确预览我的应用程序的样子（仅适用于自定义元素）：

My Templated Control继承自Pivot，我在其模板中添加了一个ContentPresenter。

（Generic.xaml）

<Style TargetType="local:Pv">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:Pv">
                <Grid x:Name="RootElement" ...>
                    ...
                    <Grid Grid.Row="1">
                        ...
                        <ScrollViewer x:Name="ScrollViewer" ...>
                            <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                <Grid x:Name="PivotLayoutElement">
                                    ...
                                    <!-- This is what I added -->
                                    <ContentPresenter
                                        x:Name="FeaturePresenter"
                                        Grid.Row="1"
                                        Grid.Column="0"
                                        Grid.ColumnSpan="3"
                                        HorizontalAlignment="Stretch"
                                        Visibility="{TemplateBinding FeatureVisibility}"
                                        Content="{TemplateBinding Feature}" />
                                </Grid>
                            </PivotPanel>
                        </ScrollViewer>
                    </Grid>
                    </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

（Pv.cs）

public sealed class Pv : Pivot
{
    public object Feature
    {
        get { return (object)GetValue(FeatureProperty); }
        set { SetValue(FeatureProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Feature.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty FeatureProperty =
        DependencyProperty.Register("Feature", typeof(object), typeof(Pv), new PropertyMetadata(null));

    public Visibility FeatureVisibility
    {
        get { return (Visibility)GetValue(FeatureVisibilityProperty); }
        set { SetValue(FeatureVisibilityProperty, value); }
    }

    // Using a DependencyProperty as the backing store for FeatureVisibility.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty FeatureVisibilityProperty =
        DependencyProperty.Register("FeatureVisibility", typeof(Visibility), typeof(Pv), new PropertyMetadata(Visibility.Visible));

    public Pv()
    {
        this.DefaultStyleKey = typeof(Pv);
    }
}

（以下是我在Generic中使用的Pivot Styles and Templates，xaml并将我的ContentPresenter放入其中）。

我的UserControl是PivotItem标题的模板。

（PvHd.xaml）

<StackPanel VerticalAlignment="Center" MinWidth="75">
    <TextBlock x:Name="Header"
               Padding="0,36,0,24"
               VerticalAlignment="Center"
               TextAlignment="Center"
               TextLineBounds="Tight"
               Foreground="Black"
               FontSize="16"
               Text="{x:Bind Text}" />
</StackPanel>

（PvHd.xaml.cs）

public sealed partial class PvHd : UserControl
{
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(PvHd), new PropertyMetadata(string.Empty));

    public PvHd()
    {
        this.InitializeComponent();
    }

这是我的页面内容：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <local:Pv>
        <local:Pv.Resources>
            <Style TargetType="PivotHeaderItem">
                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
                <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                <Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
                <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                <Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
                <Setter Property="Height" Value="48" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="PivotHeaderItem">
                            <Grid
                                x:Name="Grid"
                                Background="{TemplateBinding Background}">
                                <Grid.Resources>
                                    <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                        <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
                                        <Setter Property="FontWeight" Value="SemiBold" />
                                        <Setter Property="FontSize" Value="15" />
                                        <Setter Property="TextWrapping" Value="Wrap" />
                                        <Setter Property="LineStackingStrategy" Value="MaxHeight" />
                                        <Setter Property="TextLineBounds" Value="Full" />
                                        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
                                    </Style>
                                    <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter"
                                           BasedOn="{StaticResource BaseContentPresenterStyle}">
                                        <Setter Property="FontFamily"
                                                Value="{ThemeResource PivotHeaderItemFontFamily}" />
                                        <Setter Property="FontWeight"
                                                Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
                                        <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
                                    </Style>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                               Storyboard.TargetProperty="BorderThickness">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="0" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                               Storyboard.TargetProperty="Margin">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="0,0,0,10" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames
                                                    Storyboard.TargetName="ContentPresenter"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="Black" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
                                                                               Storyboard.TargetProperty="BorderThickness">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="0,0,0,10" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentPresenter
                                    x:Name="ContentPresenter"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    Margin="{TemplateBinding Padding}"
                                    FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    FontWeight="{TemplateBinding FontWeight}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:Pv.Resources>
        <PivotItem>
            <PivotItem.Header>
                <local:PvHd Text="Jalapeno" />
            </PivotItem.Header>
            <Rectangle Fill="GreenYellow" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:PvHd Text="Jowl" />
            </PivotItem.Header>
            <Rectangle Fill="Peru" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:PvHd Text="Tenderloin" />
            </PivotItem.Header>
            <Rectangle Fill="CadetBlue" />
        </PivotItem>
    </local:Pv>
    <Button Content="Back" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Tapped="Button_Tapped" />
</Grid>

我使用最新版本的VS2015。我需要注意它是我遇到这个问题的众多项目之一。对不起，很长的问题。

如何在Xaml中正确表示自定义控件？

0 个答案: