2012-12-03 89 views
9

我剛開始用WPF和需要複選框特定功能:WPF複選框風格變化

  1. 我想要的形狀從框更改爲橢圓形。
  2. 還有更多應該有一個顏色變化(綠色=真,紅色=假),而不是交叉。

背景:我有不同的傳感器,並希望通過這些複選框啓用/禁用它們。我也想用按鈕代替複選框,但我認爲這個功能更多的是由複選框給出的。

我希望我的描述可以理解。有沒有可能定義這樣的樣式模板?

親切的問候

亞歷

+0

是的,這是可能的,這個問題已經在這裏問過(雖然我很努力地找到一個鏈接)。術語是「自定義模板」,您可以使用Expression Blend來創建它。 – ChrisF

+0

Expression Blend ...我從來沒有聽說過這個。非常感謝,我會檢查一下! – xandi1987

回答

7

你將需要定製的複選框,並創建一個自定義模板
爲此,您需要更改default Checkbox Template

你想要做的就是使用觸發器和背景進行一點點調整,以便像你想要的那樣進行設計。注意CheckMark財產,你可能會想保留它Hidden

+0

好的非常感謝。我保持CheckMark屬性隱藏,並在那裏放置一些橢圓。通過觸發我可以設置綠色/紅色。這可以工作嗎? – xandi1987

+0

是的,設置紅色的默認背景顏色,並修改IsChecked觸發器,所以當它是真的更改背景爲綠色 – Blachshma

+0

非常感謝你 – xandi1987

11

好吧終於我做到了!在附上,你可以看到我的解決方案,我很舒適的結果。如果有人有任何評論,請不要猶豫,寫評論。非常感謝您的幫助

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="CheckBox" x:Key="CircleCheckbox"> 
     <Setter Property="Cursor" Value="Hand"></Setter> 
     <Setter Property="Content" Value=""></Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type CheckBox}">     
        <Grid>      
         <Ellipse x:Name="outerEllipse"> 
          <Ellipse.Fill> 
           <RadialGradientBrush> 
            <GradientStop Offset="0" Color="Red"/> 
            <GradientStop Offset="0.88" Color="LightCoral"/> 
            <GradientStop Offset="1" Color="DarkRed"/> 
           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <Ellipse Margin="10" x:Name="highlightCircle" > 
          <Ellipse.Fill > 
           <LinearGradientBrush > 
            <GradientStop Offset="0" Color="Green"/> 
            <GradientStop Offset="0.5" Color="LightGreen"/> 
            <GradientStop Offset="1" Color="DarkGreen"/> 
           </LinearGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="True"> 
          <Setter TargetName="highlightCircle" Property="Fill"> 
           <Setter.Value> 
            <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1"> 
             <GradientStop Offset="0" Color="Green"/> 
             <GradientStop Offset="0.5" Color="LightGreen"/> 
             <GradientStop Offset="1" Color="DarkGreen"/> 
            </LinearGradientBrush> 
           </Setter.Value> 
          </Setter> 
          <Setter TargetName="outerEllipse" Property="Fill"> 
           <Setter.Value> 
            <RadialGradientBrush> 
             <GradientStop Offset="0" Color="Green"/> 
             <GradientStop Offset="0.88" Color="LightGreen"/> 
             <GradientStop Offset="1" Color="DarkGreen"/> 
            </RadialGradientBrush> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="False"> 
          <Setter TargetName="highlightCircle" Property="Fill"> 
           <Setter.Value> 
            <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1"> 
             <GradientStop Offset="0" Color="Red"/> 
             <GradientStop Offset="0.5" Color="LightCoral"/> 
             <GradientStop Offset="1" Color="DarkRed"/> 
            </LinearGradientBrush> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>  
</ResourceDictionary> 
+0

謝謝你的這種解決方案,它工作正常,但我不想改變複選框形狀我該如何做到這一點?你能給我一些指導嗎? –