2015-10-06 60 views
0

我很難理解模板以及如何使用它們並在應用程序中重複使用它們。我在資源字典中定義了兩個樣式模板,然後在我的頁面中將它們加載到正確的控件中,並將樣式設置爲字典中的資源,但屏幕上沒有顯示任何內容。我已控制在另一個網頁的工作,但我試圖使它可重用的,代碼:模板不工作,沒有在屏幕上顯示任何內容

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

任何線索發生了什麼,或者我的模板出錯了? DockPanel中的

+0

我不能讓它工作=( –

+0

發佈最終的答案有充分的解釋。 – AnjumSKhan

回答

0
  1. 變化的背景下,這將使用背景屬性在擴展在DockPanel中設置。你已經把它設置爲紫羅蘭。

    <DockPanel Background="{TemplateBinding Background}"> 
    
  2. 將ToggleButton Content屬性更改爲<ToggleButton Content="{TemplateBinding Header}"。 這將在ToggleButton中顯示Expander的頭部內容。您已將其設置爲'Administrar Cuentas'。從

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

    您的擴展的

  3. 變更控制模板

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

您正試圖把你的頭內容的TextBlock的內側(XAML集) TextBlock中(模板)。現在,更改標題內容的TextBlock後將出現在邊框內。注意這裏<ContentPresenter/>指向 標題。

  1. 這些更改已足夠。我也改變了擴展的水平屬性,如: 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.

+0

非常感謝你!它的工作! –