\

In the cone of light, all is fate

【WPF控件样式】

自定义弹窗单选框

CheckBox扁平化

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                        <Grid x:Name="markGrid" Width="16" Height="16">
                            <Path x:Name="optionMark" Data="M853.32992 102.4H170.67008C133.13024 102.4 102.4 133.13024 102.4 170.67008v682.65984C102.4 890.86976 133.13024 921.6 170.67008 921.6h682.65984C890.86976 921.6 921.6 890.86976 921.6 853.32992V170.67008C921.6 133.13024 890.86976 102.4 853.32992 102.4zM457.8304 716.8L204.8 463.72864l48.27136-48.26112 204.75904 204.8L770.92864 307.2 819.2 355.47136 457.8304 716.8z"
                                  Fill="#787878" Margin="1" Stretch="Fill"/>
                        </Grid>
                    <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="Padding" Value="4,-1,0,0"/>
                    </Trigger>
               
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Fill" TargetName="optionMark" Value="#1296db"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ListBox去除交互效果

<Style x:Key="ListBoxItemContainerStyle1" TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Padding" Value="4,1"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以上两者配合

<Popup Name="MyPopup" StaysOpen="False" PlacementTarget="{Binding ElementName=ShowPopupButton}" AllowsTransparency="True" PopupAnimation="Slide">
    <Border Background="#484848"  BorderThickness="0" CornerRadius="5" Padding="5">
        <ListBox Name="MyListBox" BorderThickness="0" Background="Transparent"
                 ItemsSource="{Binding TimeSeletList}"
                  ItemContainerStyle="{StaticResource ListBoxItemContainerStyle1}"
                 >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox Content="{Binding }"  Style="{StaticResource CheckBoxStyle1}" Foreground="White"
                              IsChecked="{Binding IsSelected, 
                                          RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, 
                                          Mode=TwoWay}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Border>
</Popup>

image

posted @ 2024-07-12 15:39  Ymrt  阅读(2)  评论(0编辑  收藏  举报