WPF把CheckBox的文字放到左邊,開關在右邊

效果

實現

這篇文章給了一個不錯的參考方案.

http://www.codeproject.com/Articles/19141/WPF-Checkbox-Text-On-Left-Side

但是因為只是想把開關文字換一個位置,我覺得應該有CheckBox默認的模板再稍作修改就可以了.而且上面那個文章的方案在對其上面和原來的CheckBox有所不同.

所以我去看了一下CheckBox默認的模板.以下是和今天內容相關的部分.

<Setter Property="Control.Template">
  <Setter.Value>
    <ControlTemplate TargetType="CheckBox">
      <BulletDecorator Background="#00FFFFFF" SnapsToDevicePixels="True">
        <BulletDecorator.Bullet>
          <mwt:BulletChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" IsChecked="{TemplateBinding ToggleButton.IsChecked}" />
        </BulletDecorator.Bullet>
        <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
      </BulletDecorator>
    </ControlTemplate>
  </Setter.Value>
</Setter>

這里有一個很重要的類就是BulletDecorator,這是一個Decorator元素,它具有兩個內容屬性： Bullet 和 Child。 Bullet 屬性定義用作項目符號的 UIElement。 Child 屬性定義以可視化方式與該項目符號對齊的 UIElement。 也就是兩個東西,左邊的是Bullet右邊的那個是Child.他們會自動對齊.所以解決方案就是把Bullet和Child的內容對換一下就好了.這里需要注意的是,BulletChrome是在clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero的程序集中.所以項目需要添加PresentationFramework.Aero.dll的引用,這個文件在C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0下面.而且需要在XAML文檔中聲明.

下面給我修改后的源文件.

<Window x:Class="TreeAndCheckBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"        
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <Style TargetType="{x:Type CheckBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <BulletDecorator SnapsToDevicePixels="True" Background="#00FFFFFF">
                                <BulletDecorator.Bullet>
                                    <ContentPresenter 
                                    SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                                    Margin="{TemplateBinding Control.Padding}" 
                                    VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" 
                                    HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" 
                                    ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" 
                                    ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                                    Content="{TemplateBinding ContentControl.Content}" 
                                    RecognizesAccessKey="True"/>
                                </BulletDecorator.Bullet>
                                <Microsoft_Windows_Themes:BulletChrome 
                                        Background="{TemplateBinding Panel.Background}" 
                                        IsChecked="{TemplateBinding ToggleButton.IsChecked}" 
                                        RenderPressed="{TemplateBinding ButtonBase.IsPressed}" 
                                        RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 
                                        BorderBrush="{TemplateBinding Border.BorderBrush}"/>
                            </BulletDecorator>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <CheckBox Content="測試CheckBox" HorizontalAlignment="Left" VerticalAlignment="Top" />
    </Grid>
</Window>