Làm cách nào để tạo kiểu cho Đầu trang Mở rộng WPF?

Question

Tôi muốn áp dụng kiểu trên Đầu trang mở rộng WPF. Trong XAML sau đây, tôi có Expander nhưng phong cách dành cho tất cả nó không chỉ cho tiêu đề.

Cảm ơn.

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Width="640" 
> 
    <StackPanel> 
     <StackPanel.Resources> 
      <Style TargetType="Expander"> 
       <Style.Resources> 
        <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1"> 
         <GradientStop Color="#EF3132" Offset="0.1" /> 
         <GradientStop Color="#D62B2B" Offset="0.9" /> 
        </LinearGradientBrush> 
       </Style.Resources> 
       <Setter Property="Background" Value="{StaticResource BackBrush}"/> 
      </Style> 
     </StackPanel.Resources> 
     <Expander> 
      <StackPanel> 
       <TextBlock>Bike</TextBlock> 
       <TextBlock>Car</TextBlock> 
       <TextBlock>Truck</TextBlock> 
      </StackPanel> 
     </Expander> 
    </StackPanel> 
</Page> 

Answer 1

Tôi đã kết hợp một số XAML từ Josh Smith và MSDN và đưa ra giải pháp. Thật vậy, việc kiểm soát (ít nhất là tiêu đề) phải được xem xét.

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Width="400"> 
    <StackPanel> 
     <StackPanel.Resources> 

      <Style TargetType="Border" x:Key="RacePitBorderStyle" > 
       <Style.Resources> 
        <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1"> 
         <GradientStop Color="#EF3132" Offset="0.1" /> 
         <GradientStop Color="#D62B2B" Offset="0.9" /> 
        </LinearGradientBrush> 
       </Style.Resources> 
       <Setter Property="Background" Value="{StaticResource BackBrush}"/> 
      </Style> 

      <DataTemplate x:Key="titleText"> 
       <Border Style="{StaticResource RacePitBorderStyle}" Height="24"> 
        <TextBlock Text="{Binding}" 
         Margin="4 0" 
         VerticalAlignment="Center" 
         Foreground="White" 
         FontSize="11" 
         FontWeight="Normal" 
         Width="{Binding 
         RelativeSource={RelativeSource 
         Mode=FindAncestor, 
         AncestorType={x:Type Expander}}, 
         Path=ActualWidth}" 
         TextWrapping="Wrap"/> 
       </Border> 
      </DataTemplate> 

      <Style TargetType="{x:Type Expander}"> 
       <Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/> 
      </Style> 

     </StackPanel.Resources> 

     <Expander Name="hcontCtrl" Header="This is the header."> 
      <StackPanel> 
       <TextBox>This is a textbox</TextBox> 
       <Button>A button</Button> 
      </StackPanel> 
     </Expander> 

    </StackPanel> 
</Page> 

Answer 2

Phụ thuộc vào những gì bạn muốn tạo kiểu - bạn có thể tạo kiểu cho bất kỳ phần nào của nó. Nếu bạn muốn thay đổi nội dung trong tiêu đề, chỉ cần đặt tất cả giao diện người dùng của bạn trong thuộc tính Expander.Header và nó sẽ hiển thị trong vùng tiêu đề.

nếu điều đó không đáp ứng nhu cầu của bạn, có thể bạn cần phải lại mẫu kiểm soát. Hãy xem các mẫu kiểm soát được vận chuyển trong WPF here

Answer 3

Tôi nghĩ câu trả lời của Vasile đang đi đúng hướng, nhưng có vẻ như nó hoạt động nhiều hơn áp phích ban đầu cần thiết. Tất cả các câu hỏi ban đầu đã được yêu cầu làm là thay đổi nền của tiêu đề. Trong khi thay đổi được trình bày không làm điều đó, nó cũng làm những việc khác.

Một trong những thứ khác là thay thế triển khai mặc định, tôi tin rằng một ContentPresenter, với một TextBlock. Vì vậy, những gì sẽ xảy ra khi sau này chúng tôi thêm một expander thứ hai để stackpanel này? Có thể một cái gì đó như:

<Expander> 
    <Expander.Header> 
     <StackPanel> 
      <Border height="5" width="5" Foreground="Blue"/> 
      <TextBlock>Ha!</TextBlock> 
     </StackPanel> 
    </Expander.Header> 
</Expander> 

Tôi không biết, nhưng nó không tốt. Thay vào đó, tôi nghĩ rằng chúng tôi muốn giữ điều này đơn giản.

<DataTemplate x:Key="expanderHeader"> 
    <ContentPresenter 
     Content={Binding} 
     TextBlock.Background={StaticResource myBrush}/> 
</DataTemplate> 

<Style TargetType="Expander"> 
    <Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/> 
</Style> 

Bằng cách đó, khi ai đó đặt thứ gì đó không chỉ là văn bản trong thiết bị mở rộng theo kiểu của chúng tôi, chúng tôi sẽ không phá vỡ. Nếu bạn muốn chắc chắn rằng bạn quấn toàn bộ những gì họ làm với nền tảng này, mà có lẽ là mong muốn, điều đó sẽ trông giống như:

<DataTemplate x:Key="expanderHeader"> 
    <Border Background={StaticResource myBrush}> 
     <ContentPresenter Content={Binding}/> 
    </Border> 
</DataTemplate>