Как создать кнопку круга с фоновым изображением и ощущением щелчка в Silverlight - PullRequest
Новая
       34

Как создать кнопку круга с фоновым изображением и ощущением щелчка в Silverlight

3 голосов
/ 08 сентября 2010

Прямо сейчас я могу изменить вид кнопки на эллипс с фоновым изображением. Однако, когда я нажимаю на нее, я не чувствую Эффекта щелчка обычных кнопок в Silverlight Может кто-нибудь помочь мне, как получить этот эффект?

это мой стиль XAML для круглой кнопки 

<style x:Key="roundButton" TargetType="Button">
    <Setter Properties="Template">
        <Setter.Value>
              <ControlTemplate TargetType="Button">
                 <Ellipse width="100" height="100">
                     <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png">
                     </Ellipse.Fill>
                 </Ellipse>

              </ControlTemplate>
        </Setter.Value>
    </Setter>
</style>

после поиска я знаю, что должен использовать VisualStateManager в Systems.Window. Вот так выглядит мой XAML, но я до сих пор не могу получить ощущение щелчка, как у обычных кнопок 

<Style x:Key="roundButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                    <Ellipse Width="100" Height="100">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png" />
                        </Ellipse.Fill>
                    </Ellipse>

                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="MouseOver"/>
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Pressed"/>
                            <vsm:VisualState x:Name="Disabled"/>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="Unfocused"/>
                            <vsm:VisualState x:Name="Focused"/>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Ответы [ 3 ]

3 голосов
/ 08 сентября 2010

Вам необходимо установить триггеры для вашей кнопки для соответствующего состояния. 

<style x:Key="roundButton" TargetType="Button">
    <Setter Properties="Template">
        <Setter.Value>
              <ControlTemplate TargetType="Button">
                 <Ellipse width="100" height="100">
                     <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png"/>
                     </Ellipse.Fill>
                 </Ellipse>

                 <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                       <!-- mouse over look and feel here -->
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                       <!-- clicked look and feel here -->
                    </Trigger>
                    </ControlTemplate.Triggers> 
              </ControlTemplate>
        </Setter.Value>
    </Setter>
</style>
1 голос
/ 09 марта 2012 

        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin=".2,.2">
                                    <GradientStop Offset="0.2" Color="White" />
                                    <GradientStop Offset="1" Color="Blue" />

                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>

            </Setter.Value>
        </Setter>

    </Style>
0 голосов
/ 08 сентября 2010

Намного проще использовать Blend. Перетащите эллипс, преобразуйте его в элемент управления (кнопка). Перейти к StatesTab соответствующим образом настроить состояния. Обычно в нажатом состоянии применяют масштабную трансформацию, чтобы уменьшить размер кнопки, и используют трансляционное преобразование, чтобы переместить кнопку (примерно на 2 пикселя) в направлении вниз / вправо.

НТН

...