locked
Bind button background with ViewModel RRS feed

  • Question

  • I want to bind my button background with ViewMode but failed.

    Can someone could help me?

    Wednesday, August 23, 2017 1:49 AM

All replies

  • Hi WH1965,

    You could try with following code to bind button background ViewModel.

    <UserControl.Resources>
            <Style TargetType="Button" x:Key="InformButton2"  >
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="FontStyle" Value="Normal"/>
                <Setter Property="FontFamily" Value="Arial"/>
                <Setter Property="FontWeight" Value="SemiBold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="Transparent" >
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommomStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                           Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="LightGray" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                           Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="LightGray" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled" >
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" 
                                           Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="LightGray" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
    
                                <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}"  
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"  >
                                    <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" 
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" 
                          Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Button Height="30" Width="145" Content="Test Pure Red Color" Background="{Binding ButtonBackground ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                    Click="Button_Click" Style="{StaticResource InformButton2}"></Button>
        </Grid>

    Best Regards,
    Weiwei


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, August 23, 2017 6:26 AM
    Moderator