1

Blend を使用して丸いボタンを作成しました。うまく機能しますが、タッチ イベントに応答しません。ボタンは少し小さくなり、不透明度を 1.0 に設定する必要があります。これは、Nokia Maps アプリの場所ボタンと同様です。

これは私の既存のコントロール テンプレートです。

        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="50" Margin="{StaticResource PhoneTouchTargetOverhang}">
            <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
                <ContentControl.RenderTransform>
                    <ScaleTransform x:Name="buttonScale" />
                </ContentControl.RenderTransform>
            </ContentControl>
        </Border>
    </ControlTemplate>

適切な StoryBoard とは何ですか? また、挿入する必要がある場所はどこですか?

4

1 に答える 1

3

私が提案する最初のことは、丸いエッジを持つ Border ではなく、 Ellipseを使用して円を作成することです。そうすれば、ボタンを別のサイズにする必要があると判断した場合でも、CornerRadius を微調整し続ける必要はありません。Ellipse と ContentPresenter を Grid で次のように重ねることができます。

<ControlTemplate TargetType="Button">
    <Grid Background="Transparent">
       <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

タッチに対するボタンの視覚的な反応を変更するには、Blend で Visual States を使用する必要があります。ボタン テンプレートを開いた状態で、Statesタブをクリックします (または、表示されていない場合は Window | States に移動します)。

ボタン テンプレートが開いている場合は、編集できるいくつかの組み込みの視覚的状態が表示されます。押された状態を選択すると、録音モードに入ります。ボタンを押すと、テンプレートに加えた変更が表示されます。メイン コンテンツ ウィンドウの周りの赤いアウトラインと通知により、録画モードに入っていることがわかります。

この状態で、ボタンを押したときに見たいものを変更します。あなたの場合、楕円の不透明度を 100% に設定し、グリッドのスケール変換を必要に応じて小さいものに設定します。

[States] タブの [ Base state ] をクリックして、記録モードを終了してください。

これで、実行時にボタンを押すと、記録した変更が表示されるはずです。それらはまた瞬時になります。状態間の適切な移行を行うには、[状態] タブに戻ります。そして、 Pressed状態の横にある[トランジションを追加] ボタンをクリックします。

ここに画像の説明を入力

->Pressed と Pressed->のトランジションを追加します。これらは、押された状態に出入りするときに再生されるトランジションです。ここでは、トランジションの長さとイージング機能を編集できます。

ここに画像の説明を入力

個人的には通常、Quadratic Ease In/Out を使用して 0.2 秒前後で何かを行います。ボタンを押すと、異なる表示状態の間にわずかなアニメーションが表示されるはずです。

幸運を！

于 2013-02-23T15:43:26.137 に答える