代码之家  ›  专栏  ›  技术社区  ›  Archie

WPF在自定义控件中保留基样式

  •  2
  • Archie  · 技术社区  · 15 年前

    我创建了一个自定义按钮,因为我想要一个图像和其中的文本,如下所示:

    <Style TargetType="{x:Type Local:ImageButton}">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Local:ImageButton}">
                      <StackPanel Height="Auto" Orientation="Horizontal">
                           <Image Margin="0,0,3,0" Source="{TemplateBinding ImageSource}"/>
                           <TextBlock Text="{TemplateBinding Content}" /> 
                       </StackPanel>
                 </ControlTemplate>
              </Setter.Value>
         </Setter>
    </Style>
    

    在这里,ImageButton是一个继承自Button类并将ImageSource作为依赖属性的类。

    但我想保持原来按钮的外观和感觉。 我该怎么做? 谢谢。

    4 回复  |  直到 13 年前
        1
  •  5
  •   gehho    15 年前

    你可以使用 Style.BasedOn 属性:

    <Style TargetType="{x:Type Local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
        <!-- ... -->
    </Style>
    
        2
  •  2
  •   Community CDub    8 年前

    完整代码请参阅链接:

    Custom button template in WPF

        3
  •  1
  •   opedog    15 年前

    好吧,我第一次尝试这个是错的。在上面的代码段中,您需要做的不是重写模板,而是重写ContentTemplate。这仍然会保留原始按钮的外观,但ImageButton中的内容将是文本和图像。您可能还需要按照Gehho的建议进行操作,只是为了确保它知道其他一切都来自于您的隐式按钮样式。

        4
  •  0
  •   Kishore Kumar    15 年前

    您可以从简单样式创建按钮并对其进行修改。试试这个,我不知道它是否适合你。很抱歉回答太长(如果它不适合您的情况)

        <!-- SimpleStyles.XAML defines a set of control styles which are simplified starting points for creating your own controls -->
    
        <!-- Brushes : These are used to define the color for background, foreground, selection, enabled etc of all controls
    If you want to change the color of a control you can just chnage the brush; if you want to add a new shape or change arrangement then also edit the template -->
    
        <!-- NormalBrush is used as the Background for SimpleButton, SimpleRepeatButton -->
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EEE" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
    
        <!-- LightBrush is used for content areas such as Menu, Tab Control background -->
        <LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="1.0"/>
        </LinearGradientBrush>
    
        <!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
        <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#AAA" Offset="1.0"/>
        </LinearGradientBrush>
    
        <!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#444" Offset="0.0"/>
            <GradientStop Color="#888" Offset="1.0"/>
        </LinearGradientBrush>
    
        <!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
        <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>
    
        <!-- Disabled Brushes are used for the Disabled look of each control -->
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
        <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>
    
        <!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>
    
        <!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
        <LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#777" Offset="0.0"/>
            <GradientStop Color="#000" Offset="1.0"/>
        </LinearGradientBrush>
    
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
        <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
        <SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>
    
        <!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
        <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
    
    
        <!-- Style and Template pairs are used to define each control Part -->
        <!-- The Style provides default values on the control; the Template gives the elements for each control -->
    
        <!-- SimpleButtonFocusVisual is used to show keyboard focus around a SimpleButton control -->
        <Style x:Key="SimpleButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle Margin="2" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!-- Simple Button - This control sets brushes on each state. Note that these brushes must be listed above since they are static resources -->
        <Style TargetType="{x:Type Local:MyButton}">
            <Setter Property="FocusVisualStyle" Value="{DynamicResource SimpleButtonFocusVisual}"/>
            <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Local:MyButton}">
    
                        <!-- We use Grid as a root because it is easy to add more elements to customize the button -->
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" CornerRadius="3" Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"/>
    
                            <!-- Content Presenter is where the text content etc is placed by the control -->
                            <!-- The bindings are useful so that the control can be parameterized without editing the template -->
                            <StackPanel Height="Auto" Orientation="Horizontal">
                                <Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
                                <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Left" Foreground="{DynamicResource TaskButtonTextBrush}" FontWeight="Bold"  Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
                            </StackPanel>
                        </Grid>
    
                        <!--Each state sets a brush on the Border in the template -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" Value="{DynamicResource DefaultedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="{DynamicResource PressedBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="true"/>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
                                <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--<Style TargetType="{x:Type Local:MyButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Local:MyButton}">
                        <StackPanel Height="Auto" Orientation="Horizontal">
                            <Image Source="{TemplateBinding ImageSource}" Width="24" Height="24" Stretch="Fill"/>
                            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Left" Foreground="{DynamicResource TaskButtonTextBrush}" FontWeight="Bold"  Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>-->
    
    
    
    <Grid>
        <Local:MyButton ImageSource="/WpfApplication1;component/MoveRight.png" Margin="33,101,131,127">
            Kishore
        </Local:MyButton>
    
    </Grid>