2015-12-09 53 views
1

我想根據屬性在WPF中的兩種樣式之間切換。 要在每個樣式中使用ControlTemplate的樣式和在ControlTemplates之間切換的觸發器之間切換樣式。 我的問題是,我有一個ContentPresenter內每個基本風格,我不能從外部(從用途)設置它。WPF:如何通過樣式和ControlTemplate之間的內容屬性

這是我在XAML代碼:

<Style x:Key="SecondaryButtonStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/> 
    <Setter Property="BorderBrush" Value="Transparent"/> 
    <Setter Property="BorderThickness" Value="2"/> 
    <Setter Property="Foreground" Value="#FF494F5A"/> 
    <Setter Property="FontSize" Value="24.5" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="MinHeight" Value="76" /> 
    <Setter Property="Padding" Value="10,0,10,0"/> 
    <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" > 
        <Grid>       
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>       
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" /> 
        </Trigger> 

        <Trigger Property="IsPressed" Value="True"> 
         <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" /> 
        </Trigger> 


       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="SecondaryButtonWithArrowStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/> 
    <Setter Property="BorderBrush" Value="Transparent"/> 
    <Setter Property="BorderThickness" Value="2"/> 
    <Setter Property="Foreground" Value="#FF494F5A"/> 
    <Setter Property="FontSize" Value="24.5" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="MinHeight" Value="76" /> 
    <Setter Property="Padding" Value="20,0"/> 
    <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" > 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4"> 
          <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
            Fill="#FF646A74" x:Name="Path"/> 
          <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
            Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
         </Grid> 
         <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>       
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" /> 
        </Trigger> 

        <Trigger Property="IsPressed" Value="True"> 
         <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<ControlTemplate x:Key="NormalButton"> 
    <Button Style="{StaticResource SecondaryButtonStyle}" /> 
</ControlTemplate> 

<ControlTemplate x:Key="ArrowButton"> 
    <Button Style="{StaticResource SecondaryButtonWithArrowStyle}" /> 
</ControlTemplate> 


<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}"> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="False"> 
      <Setter Property="Template" Value="{StaticResource NormalButton}" /> 
     </Trigger> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Template" Value="{StaticResource ArrowButton}" /> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

用法是:

<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

我怎樣才能讓按鈕拍攝Content="Back"

謝謝!

安娜。

+0

那麼既然你有不同的風格,無論如何,我認爲你的condition在某些時候是一個布爾值,爲什麼不只是用可見性和轉換器交換單獨的按鈕,而不是在同一個對象上交換樣式的所有內容?性能明智,它會更有意義。 –

+0

感謝您的回答,但是我們考慮了一下,並對未來有了一個總結,如果我們需要5種不同樣式的enum屬性而不是bool - 觸發器使得它更易於使用,並且沒有轉換器需要。 –

回答

1

我找到了一個解決方案: 我將樣式更改爲ControlTemplate,並創建了一個基本樣式,該樣式將成爲帶觸發器的主樣式的BasedOn樣式。

新的代碼是:

<Style x:Key="BaseButtonWithArrowStyle" TargetType="{x:Type Button}"> 
      <Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="BorderThickness" Value="2"/> 
      <Setter Property="Foreground" Value="#FF494F5A"/> 
      <Setter Property="FontSize" Value="24.5" /> 
      <Setter Property="FontWeight" Value="Bold" /> 
      <Setter Property="HorizontalContentAlignment" Value="Center"/> 
      <Setter Property="VerticalContentAlignment" Value="Center"/> 
      <Setter Property="MinHeight" Value="76" /> 
      <Setter Property="Effect" Value="{StaticResource ButtonEffect}"/> 
     </Style> 


     <ControlTemplate x:Key="NormalButton" TargetType="Button"> 
      <Border Background="{TemplateBinding Background}" CornerRadius="5" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" > 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
        </Grid.ColumnDefinitions> 
        <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,0,0,0"> 
         <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
            Fill="#FF646A74" x:Name="Path"/> 
         <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
            Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Grid> 
        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" /> 
       </Trigger> 

       <Trigger Property="IsPressed" Value="True"> 
        <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" /> 
       </Trigger> 

      </ControlTemplate.Triggers> 
     </ControlTemplate> 


     <ControlTemplate x:Key="ArrowButton" TargetType="Button"> 
      <Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5" 
          BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" > 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4"> 
         <Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478" 
            Fill="#FF646A74" x:Name="Path"/> 
         <Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z" 
            Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Grid> 
        <ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        <Viewbox Width="55" Height="55" Grid.Column="2"> 
         <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,4,4" RenderTransformOrigin="0.5,0.5"> 
          <Path Data="F1M53.214,40.132C54.801,36.559 55.708,32.607 55.708,28.435 55.708,12.757 43.212,0 27.854,0 12.495,0 0,12.757 0,28.435 0,44.116 12.495,56.873 27.854,56.873 32.587,56.873 37.042,55.653 40.95,53.521" 
              Fill="White"/> 
          <Path Data="F1M46.556,38.537L45.676,39.265 45.723,46.108 28.875,46.108 28.875,44.318 28.221,44.594 28.221,42.656 46.556,35.641z M27.854,0C23.121,0,18.666,1.221,14.759,3.353L24.395,25.827C33.549,28.967 39.062,26.315 40.16,25.926 41.325,25.514 42.419,25.702 43.139,25.904 44.271,26.215 46.152,28.391 45.442,29.216 41.664,33.584 30.583,38.32 28.825,38.204 27.066,38.092 23.007,38.156 23.007,38.156L22.645,39.563 14.373,41.318C14.373,41.318 13.041,38.472 12.885,37.841 12.728,37.209 13.26,36.858 13.26,36.858 12.355,36.334 11.869,33.725 11.626,31.787L9.378,32.791 2.494,16.743C0.906,20.314 0,24.267 0,28.439 0,44.117 12.496,56.873 27.854,56.873 43.213,56.873 55.708,44.117 55.708,28.439 55.708,12.759 43.213,0 27.854,0" 
              Fill="#FFFF8241" RenderTransformOrigin="0.5,0.5" > 
           <Path.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="1" ScaleX="-1"/> 
            </TransformGroup> 
           </Path.RenderTransform> 
          </Path> 
         </Grid> 
        </Viewbox> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" /> 
       </Trigger> 

       <Trigger Property="IsPressed" Value="True"> 
        <Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" /> 
       </Trigger> 


      </ControlTemplate.Triggers> 
     </ControlTemplate> 

     <Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonWithArrowStyle}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="False"> 
        <Setter Property="Template" Value="{StaticResource NormalButton}" /> 
        <Setter Property="Padding" Value="42,0,70,0"/> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Template" Value="{StaticResource ArrowButton}" /> 
        <Setter Property="Padding" Value="20,0"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 

現在改變根據在內容屬性按鈕的內容:

<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
相關問題