피벗 컨트롤에서 제목 및 머리글 배경 변경

Question

내 전화 7 응용 프로그램에서 피벗 컨트롤을 사용하고 있습니다. 이제 제목과 헤더 영역의 배경을 변경하고 싶습니다. 이것을 어떻게 할 수 있습니까?

사용자 정의 할 수있는 피벗 컨트롤의 전체 템플릿이 있습니까?

이미 피벗 컨트롤이 포함 된 표 배경을 머리글 색으로 설정하고 각 피벗 항목의 배경을 원래 배경색으로 설정하려고했습니다. 첫눈에 반가워. 그러나 피벗 항목을 왼쪽으로 닦아서 두 번째 항목을 표시하면 헤더 색상으로 채색 된 영역이 두 개의 피벗 항목 사이에 나타납니다. 그래서 그 접근법은 효과가 없습니다.

또한 제목과 머리글 항목의 서식 파일을 사용자 지정하려고했습니다. 그러나 이러한 템플릿은 전체 머리글 및 템플릿 영역이 아닌 텍스트 자체의 영역 만 포함합니다.

Answer 1

다음은 컨트롤 템플릿을 변형 한 변형입니다. Background = "Red"를 원하는 브러시로 변경하십시오.

<Style x:Key="PivotStyle1" TargetType="controls:Pivot"> 
    <Setter Property="Margin" Value="0"/> 
    <Setter Property="Padding" Value="0"/> 
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="ItemsPanel"> 
    <Setter.Value> 
     <ItemsPanelTemplate> 
     <Grid/> 
     </ItemsPanelTemplate> 
    </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="controls:Pivot"> 
     <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
       VerticalAlignment="{TemplateBinding VerticalAlignment}"> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid Background="Red" CacheMode="BitmapCache" Grid.RowSpan="2" /> 
      <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" 
       Grid.Row="2" /> 
      <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" 
          Content="{TemplateBinding Title}" Margin="24,17,0,-7"/> 
      <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" 
                Grid.Row="1"/> 
      <ItemsPresenter x:Name="PivotItemPresenter" 
          Margin="{TemplateBinding Padding}" Grid.Row="2"/> 
     </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

.... 

<controls:Pivot Title="MY APPLICATION" Style="{StaticResource PivotStyle1}"> 

.... 

Answer 2

제목 및 머리글 템플릿은 실제 텍스트 영역에만 해당됩니다. Pivot 컨트롤의 전체 템플릿을 재정의하는 것이 가능할 수도 있지만 더 쉬운 방법은 뒤에 색상이 달린 사각형을 추가하는 것입니다.

말했다되고 그건

<controls:Pivot> 
    <controls:Pivot.HeaderTemplate> 
    <DataTemplate> 
     <Grid Background="White"><TextBloc>Your Header Here</TextBlock></Grid> 
    </DataTemplate> 
    </controls:Pivot.HeaderTemplate> 
</controls:Pivot> 

, 당신은 배경을 적용 :

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Rectangle 
    VerticalAlignment="Top" HorizontalAlignment="Stretch" 
    Height="150" Fill="Red" /> 
    <controls:Pivot Title="MY APPLICATION"> 
    <controls:PivotItem Header="item1"> 
     <Grid/> 
    </controls:PivotItem> 
    <controls:PivotItem Header="item2"> 
     <Grid/> 
    </controls:PivotItem> 
    </controls:Pivot> 
</Grid> 

Answer 3

당신은 사용자 정의 위치 및 정렬에 대해 걱정할 필요가 없습니다 때문에 일반적으로 더 나은 옵션입니다 헤더 템플릿을 수정할 수 있습니다 자동 크기 조정 그리드로 - 당연히 크기를 조정하여 올바른 크기로 조정할 수 있습니다. 각 PivotItem이 제목을 변경하려는 경우 동일한 PivotItem에 적용됩니다. 즉, 유사한 DataTemplate에 바인딩합니다.