Have Geek Brain

Wpf supports basic styling in user control

I created a custom button as I need an image and text inside it like this:

<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>

Here ImageButton is a class that inherits from Button class and has ImageSource as a dependency property.

But I want to keep the appearance of the original button. How can I do it? Thanks.

+2


a source to share


4 answers


Please refer to the link for the complete code:



Custom Button Template in WPF

+2


a source


You can use the property Style.BasedOn

:



<Style TargetType="{x:Type Local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
    <!-- ... -->
</Style>
+5


a source


Ok my first try at this was wrong. What you need to do in the above code snippet, instead of overriding the template, you need to override the ContentTemplate. This should still keep the appearance of your original button, but the content inside your ImageButton will be text and image. You might also need to do what gehho suggested, just to make sure he knows that everything else comes from your implicit button style.

+1


a source


you can create a button from a simple style and modify it. just try it, I don't know if he will hit you. sorry for the long answer (if this doesn't fit your case)

    <!-- 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>
0


a source






More articles:


All Articles