Come personalizzare lo stile della Casella di controllo WPF

Sto solo iniziare a studiare WPF, così sono familiarità con stile e modello.
Voglio personalizzare un CheckBox con un Image e due Labels come questo:

Come personalizzare lo stile della Casella di controllo WPF

Come personalizzare lo stile della Casella di controllo WPF

Come posso fare?

.xaml

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <StackPanel>
        <CheckBox Width="150" 
                  Height="40" 
                  Margin="4" 
                  Padding="4,0,0,0">
            <Grid Background="#FFEEEEEE" 
                  Width="130"
                  MaxWidth="Infinity">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0"
                       Grid.RowSpan="2"
                       Grid.Column="0"
                       Margin="5" 
                       Source="/WpfApplication4;component/Images/LargeIcon.png" />
                <Label Grid.Row="0"
                       Grid.Column="1" 
                       Padding="0">
                    Label1
                </Label>
                <Label Grid.Row="1"
                       Grid.Column="1" 
                       Padding="0">
                    Label2
                </Label>
            </Grid>
        </CheckBox>
    </StackPanel>
</Window>

Edit:

.xaml

<Application x:Class="WpfApplication4.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2006" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             StartupUri="MainWindow.xaml">

    <Application.Resources>
        <Style x:Key="MyCheckBox" 
               TargetType="{x:Type CheckBox}">
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="4"/>
            <Setter Property="Padding" Value="4,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <DockPanel Background="#FFEEEEEE" 
                                   Height="34"
                                   Width="130">
                            <Image DockPanel.Dock="Left"
                                   Source="/WpfApplication4;component/Images/LargeIcon.png"
                                   Margin="5" />
                            <TextBlock DockPanel.Dock="Top" Text="Label1" />
                            <TextBlock DockPanel.Dock="Top" Text="Label2" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

utilizzato .xaml

<CheckBox Style="{StaticResource ResourceKey=MyCheckBox}" />  

Qualcosa di essere presentato, ma la piccola griglia è scomparso, come questo:

Come personalizzare lo stile della Casella di controllo WPF

Come posso fare?

  • Non riesco a trovare qualcuno a rispondere. Cosa c’è di sbagliato? Potrebbe essere eliminato con noncuranza?
  • Scusate, stavo modificando la mia risposta 🙂
  • @sa_ddam213 ^_^
InformationsquelleAutor SubmarineX | 2013-04-25



One Reply
  1. 6

    Il DockPanel può essere l’opzione migliore per questo layout

    Esempio:

    <CheckBox>
       <DockPanel Height="34">
          <Image DockPanel.Dock="Left" Source="/WpfApplication4;component/Images/LargeIcon.png" Margin="2" />
          <TextBlock DockPanel.Dock="Top" Text="Label1" />
          <TextBlock DockPanel.Dock="Top" Text="Label2" />
       </DockPanel>
    </CheckBox>

    Edit:

    Sembra che si desidera utilizzare l’impostazione predefinita Checkbox Template ma basta ignorare il Content nel Style.

    Esempio:

    <Style x:Key="MyCheckBox" TargetType="{x:Type CheckBox}">
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Margin" Value="4"/>
        <Setter Property="Padding" Value="4,0,0,0"/>
        <Setter Property="Content">
            <Setter.Value>
                <DockPanel Background="#FFEEEEEE" Width="130"  MaxWidth="Infinity">
                    <Image DockPanel.Dock="Left" Source="Capture.png" Margin="5" />
                    <TextBlock DockPanel.Dock="Top" Text="Label1" />
                    <TextBlock DockPanel.Dock="Top" Text="Label2" />
                </DockPanel>
            </Setter.Value>
        </Setter>
    </Style>

    Risultato:

    Come personalizzare lo stile della Casella di controllo WPF

    • Thank u very much. Posso spostare la piccola griglia per la posizione di altri in pannello?
    • E come modificare dinamicamente il testo della casella di testo nella Casella di controllo?
    • Capito. Thank u!!!

Lascia un commento