0

I want to have a custom rounded button, when focused it should change the color inside the border control.

 <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="Margin" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="{TemplateBinding Background}" >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Target="BorderRadius.BorderBrush" Value="Green" />
                                        <Setter Target="BorderRadius.Background" Value="Transparent" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="BorderRadius.BorderBrush" Value="White" />
                                        <Setter Target="BorderRadius.Background" Value="Blue" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="BorderRadius.BorderBrush" Value="White" />
                                        <Setter Target="BorderRadius.Background" Value="Blue" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Focus" >
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="BorderRadius" Storyboard.TargetProperty="BorderBrush" To="Blue"/>
                                    </Storyboard>
                                    <!--<VisualState.Setters>
                                        <Setter Target="BorderRadius.BorderBrush" Value="White"/>
                                        <Setter Target="BorderRadius.Background" Value="Blue"/>
                                    </VisualState.Setters>-->
                                </VisualState>
                            </VisualStateGroup>                                               
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel>
                            <Border
                                x:Name="BorderRadius"
                                BorderThickness="1"
                                CornerRadius="22"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                >
                                <TextBlock
                                    x:Name="MyText"
                                    Text="{TemplateBinding Content}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="{TemplateBinding FontSize}"
                                    />
                            </Border>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

On xbox the 'normal', 'pressed' visualstates work fine, but i can't use the 'focus' visual state, meaning i cant make it change it's color when using the gamepad. When i use the left stick to the button, the button default black border appears but the 'focus' visual state is not triggered.

keledrame
  • 53
  • 7
  • When you say " the button default black border", do you mean the border like [this](https://i.stack.imgur.com/y2Bjr.png)? – Jay Zuo May 18 '17 at 13:22
  • Yes but i succeeded to remove that, it's called 'High Visibility Focus Visuals', but my trouble is the button does not change it's color. I also tried on desktop using the 'tab' key to get on the button, my debug shows i got the focus on this element but my custom visual state does not trigger. – keledrame May 18 '17 at 15:10

0 Answers0