Question

我很难理解模板以及如何使用它们并在我的应用程序中重复使用它们。我在资源字典中定义了两个样式模板，然后在我的页面中将它们加载到正确的控件中，并将样式设置为字典中的资源，但屏幕上没有显示任何内容，什么都没有。我让控件在另一个页面中工作，但我试图让它可以重复使用，代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style x:Key="CustomListBox" TargetType="ListBox">
    <Style.Resources>
        <Style TargetType="{x:Type Expander}">
            <Setter Property="IsExpanded"
                    Value="{Binding Path=IsSelected,
                RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
        </Style>
        <ScrollViewer x:Key="Scroller">
            <ScrollViewer.VerticalScrollBarVisibility>
                Auto
            </ScrollViewer.VerticalScrollBarVisibility>
        </ScrollViewer>
    </Style.Resources>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <ItemsPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="CustomExpander" TargetType="{x:Type Expander}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <DockPanel>
                    <ToggleButton
                        DockPanel.Dock="Top"
                        Background="Teal"
                        HorizontalAlignment="Left"
                        Content="{TemplateBinding Content}"
                        Foreground="WhiteSmoke"
                        FontSize="12"
                        Name="Header"
                        Padding="1"
                        >
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <TextBlock Text="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        Name="ExpandSite"
                        Visibility="Collapsed"
                        DockPanel.Dock="Bottom"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                    </ContentPresenter>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>        
</Style>
</ResourceDictionary>

实现：

<UserControl x:Class="Neotek.Contabilidad.UI.Views.AdminView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:views="clr-namespace:Neotek.Contabilidad.UI.Views"

         mc:Ignorable="d"
         d:DesignHeight="300" d:DesignWidth="600">

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="../Visual Resources/MenuDesplegableRD.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="250" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <ListBox Grid.Column="0" Style="{StaticResource CustomListBox}" Background="Yellow" Width="200" Height="200">
           <Expander Width="200" Height="200" Background="Violet"
                     Style="{StaticResource CustomExpander}">
            <Expander.Header>
                    <TextBlock Text="Administrar Cuentas"
                               Foreground="White" />
            </Expander.Header>
            <WrapPanel>
                <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
                <Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
                <Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
            </WrapPanel>
        </Expander>
        <Expander Style="{StaticResource CustomExpander}">
            <Expander.Header>
                <TextBlock Text="Administrar Cuentas"
                               Foreground="White" />
            </Expander.Header>
            <WrapPanel>
                <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
                <Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
                <Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
            </WrapPanel>
        </Expander>
    </ListBox>
</Grid>
</UserControl>

我有这个工作：

<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"

       Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <Expander Background="OliveDrab">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Width="60" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0"  Text="Administrar Cuentas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Cuenta"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="--------------"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="---------------"/>
                </WrapPanel>
            </Expander>

            <Expander Background="OrangeRed">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Rubros" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel Orientation="Vertical" >
                    <Label Margin="20,5,5,5" Foreground="white" Content="----------"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="----------------"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="----------------"/>
                </WrapPanel>
            </Expander>

            <Expander Background="Teal">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Subrubros" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="----------"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="-------------------"/>
                </WrapPanel>
            </Expander>
        </ListBox>

任何线索发生了什么或模板出错了什么？

Answer 1

更改DockPanel的背景，这将使用DockPanel中Expander中设置的Background属性。您已将其设置为Violet。
```
<DockPanel Background="{TemplateBinding Background}">
```
将ToggleButton Content属性更改为<ToggleButton Content="{TemplateBinding Header}"。这将在ToggleButton中显示Expander的Header内容。您已将其设置为“Administrar Cuentas”。

从

更改扩展器的控制模板

<ToggleButton.Template>
 <ControlTemplate TargetType="ToggleButton">
     <TextBlock Text="{TemplateBinding Content}"/>
  </ControlTemplate>

到

 <ToggleButton.Template>
     <ControlTemplate TargetType="ToggleButton">
        <Border BorderBrush="Yellow" BorderThickness="3" CornerRadius="5" Background="{TemplateBinding Background}" Height="24">
                <ContentPresenter/>
        </Border>
     </ControlTemplate>
 </ToggleButton.Template>

您正在尝试在TextBlock（模板）中放置Header内容的TextBlock（在XAML中设置）。现在，更改后的标题内容的TextBlock将出现在边框内。请注意这里<ContentPresenter/>指向报头中。

这些变化就足够了。我还改变了Expander的Horizontal属性，如： HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"

///////////更改了ResourceDictionary //////////

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style x:Key="CustomListBox" TargetType="ListBox">
    <Style.Resources>
        <Style TargetType="{x:Type Expander}">
            <Setter Property="IsExpanded"
                Value="{Binding Path=IsSelected,
            RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
        </Style>
        <ScrollViewer x:Key="Scroller">
            <ScrollViewer.VerticalScrollBarVisibility>
                Auto
            </ScrollViewer.VerticalScrollBarVisibility>
        </ScrollViewer>
    </Style.Resources>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <ItemsPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="CustomExpander" TargetType="{x:Type Expander}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <DockPanel Background="{TemplateBinding Background}">
                    <ToggleButton
                    Content="{TemplateBinding Header}"
                    DockPanel.Dock="Top"
                    Background="Teal"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    Foreground="WhiteSmoke"
                    FontSize="12"
                    Name="Header"
                    Padding="1"
                    >
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <Border BorderBrush="Yellow" BorderThickness="3" CornerRadius="5" Background="{TemplateBinding Background}" Height="24">
                                    <ContentPresenter/>
                                </Border>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <ContentPresenter
                    Content="{TemplateBinding Content}"
                    Name="ExpandSite"
                    Visibility="Visible"
                    DockPanel.Dock="Bottom"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    </ContentPresenter>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我只触及了你的ResourceDictionary，并为你的第二个扩展器添加了背景。

Output after modifying your styles only.

模板不工作，没有在屏幕上显示任何内容

1 个答案: