3

いくつかのトグルボタンのスタイルを変更しようとしています。トグルボタンの視覚的な動作を提供する「コントロールテンプレート」があるため、背景を単に新しい色に設定することはできないようです。したがって、単純な背景色を超えて、さまざまな視覚的動作を提供する ToggleButton の代わりの "ControlTemplate" を XAML で指定する必要があります。
Q1 . これは正しいです？

here から取得した ToggleButton の「デフォルト」コントロールテンプレートから始めて、それを変更することにしました。実際、これは Silverlight のデフォルトの ControlTemplate だと思います。私は Silverlight を使用しておらず、WPF を使用しています。しかし... WPFの対応するドキュメントページには、デフォルトのコントロールテンプレートの仕様が含まれていません。それは私が望むものではない "a" ControlTemplate を提供します。
Q2 . Silverlight のものを使用していることが重要かどうかはわかりません。そうですか？

Silverlight の例では、VisualStateManager に適用された vsm の XML 名前空間プレフィックスがあります。どうやらxml名前空間は

  xmlns:vsm = "clr-namespace:System.Windows;assembly=System.Windows"

...しかし、別の場所で、この XML 名前空間は「不要になった」と読みました。

これはすべて非常に混乱しています。

Googlespace には、私が以前に触れた「The WPF toolkit」と呼ばれるものへの参照があります。WPF V4 のリリース前に、オートコンプリート テキストボックスに使用していました。私は、WPF ツールキットの一部が .NET v4.0 の WPF に組み込まれたと推測しています。そのため、WPF ツールキットを指定する必要がなくなりました。
Q3 . 誰かがその理解を確認できれば幸いです。

さて、ToggleButton の「デフォルト」の ControlTemplate から始めて、最初のステップは、変更を加える前にコンパイルすることでした。コンパイルされず、失敗します

c:\dev...\ToggleButtonStyle1.xaml(23,14): エラー MC3074: タグ 'VisualStateManager.VisualStateGroups' が XML 名前空間に存在しません ' http://schemas.microsoft.com/winfx/2006/xaml/プレゼンテーション」。行 23 位置 14。

十分にクリア。次に、XAML で VisualStateManager を指定するためのドキュメントを調べました。紛らわしいことに、2 つの xml 名前空間が指定されています。そのうちの 1 つは、私が実際に使用したものです。

ここに画像の説明を入力

Q4うーん、どれを使えばいいの？そのうちの 1 つを使用しましたが、機能しませんでした。ドキュメントは、2 つのXML 名前空間を指定することの意味について完全に不明確です。（彼らの頭をオフに！）

プロジェクト ファイルに PresentationFramework.dll への参照があります。

  <ItemGroup>
     ....
    <Reference Include="PresentationFramework" />
  </ItemGroup>

ここでは Visual Studio を使用していません。テキストエディタを使用しています。どのボタンを押すかではなく、それがどのように機能するかを理解したい。

皆様のご協力に感謝いたします。

余談ですが、これはすべて非常に複雑に思えます。私がしたいのは、オンのときにトグルボタンの色を変更することだけです。それほど複雑ではないはずです。

4

2 に答える 2

5

VSM の名前空間を指定する必要はありません ( http://schemas.microsoft.com/winfx/2006/xaml/presentation名前空間は既定の WPF 名前空間であり、ほとんどの標準では xmlns="..." として宣言されています)。 .xaml の) -- ただし、ビジュアル階層の特定の部分でのみ使用できます。

たとえば、標準の UserControl で VSM を使用すると、次のようになります。

<UserControl x:Class="Whatever"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Disabled">
          <!-- Storyboards go here -->
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>
</UserControl>

VSM xaml をこのレベルに配置すると、ストーリーボードがグリッド内に含まれるすべての要素を参照できるようになります。これは、作業中の ControlTemplate でも同じように機能します。ただし、注意すべきことの 1 つは、独自のUserControls では、ビジュアル状態に好きな名前を付けることができるということです (最終的にコードでそのビジュアル状態に切り替えるための呼び出しを行うため) 。状態には、コントロールが期待するものとまったく同じ名前を付ける必要があります。

于 2011-09-06T19:37:38.707 に答える
0

私自身の質問に答える....
Q1はい
Q2いいえ-それは問題ではありません。テンプレートは「ほぼ」同じです。
Q3わからない
Q4わからない。

ここで重要なのは、TargetFramework=4.0を指定する必要があるということでした。私はv3.5に対してコンパイルしていましたが、VSMはv4.0で最初に利用可能になったと思います。そのため、「名前空間xxxxxに見つかりません」というエラーが発生しました。

XAMLファイルでXMLNSを指定する必要はありませんでした。

一歩下がる-より大きな質問への答え-押すと色が変わるToggleButtonを取得する方法...組み込みのControlTemplateをいじってみましたが、複雑すぎて理解できませんでした。PressやCheckedなどで発生したアニメーション-自分がやりたいことを実行する方法がわかりませんでした。

テンプレートをすべてのグラデーションやアニメーションを使用せずに、より多くのスペアに分解してから、いくつかのアニメーションとトリガーを追加して、やりたいことを実行できるようにしました。
視覚効果はこんな感じです。オン：

ここに画像の説明を入力してください

オフ：

ここに画像の説明を入力してください

私が使用したXAML：

<ResourceDictionary xmlns     = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x   = "http://schemas.microsoft.com/winfx/2006/xaml">
  <Style x:Key      = "ToggleButtonStyle3"
         TargetType = "ToggleButton">

<!-- This is a style (template?) for a toggle button. I wanted it to
     change to a contrasty color when depressed. This took me a
     loooooong time and much trial and error to figure out. The visual
     effect is somewhat like the buttons in the compile output log in
     Visual Studio, in which you can toggle the display of errors and
     warnings.
-->
    <Setter Property="Background" Value="#FFF7F0D2"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FFC4BC64" Offset="0"/>
          <GradientStop Color="#FFADA658" Offset="0.375"/>
          <GradientStop Color="#FFA19A52" Offset="0.375"/>
          <GradientStop Color="#FF847E43" Offset="1"/>
        </LinearGradientBrush>
      </Setter.Value>
    </Setter>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
          <Grid x:Name="ButtonGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimation Duration="0" Storyboard.TargetName="InnerRectangle" Storyboard.TargetProperty="Opacity" To="0.3"/>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ColorAnimation Duration="00:00:00"
                                    Storyboard.TargetName="InnerRectangle"
                                    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                    To="#FFF5BF0F"/>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                  <Storyboard>
                    <ColorAnimation Duration="00:00:00"
                                    Storyboard.TargetName="InnerRectangle"
                                    Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                    To="#FFF5D018"/>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked"/>
              </VisualStateGroup>
              <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                  <Storyboard>
                    <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused" />
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Border x:Name          ="ButtonBorder"
                    CornerRadius    ="1"
                    Background      ="{TemplateBinding Background}"
                    BorderThickness ="{TemplateBinding BorderThickness}"
                    BorderBrush     ="{TemplateBinding BorderBrush}">
              <Border x:Name="InnerButtonBorder"
                      CornerRadius="1"
                      BorderThickness="2"
                      Background="#FFFAEB16">
                <Rectangle x:Name="InnerRectangle" Opacity="1" Fill="#F7F0D2" />
              </Border>
            </Border>

            <ContentPresenter
                x:Name="contentPresenter"
                Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                TextBlock.Foreground="{TemplateBinding Foreground}"
                Margin="{TemplateBinding Padding}"/>
            <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
            <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FFD1C44D" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
          </Grid>
          <ControlTemplate.Triggers>

            <Trigger Property="ToggleButton.IsChecked" Value="True">
              <!-- This setter hides the desired element when the ToggleButton's initial state is checked -->
              <Setter TargetName="ButtonBorder" Property="Background" Value="#FFF5D018"/>
              <Setter TargetName="contentPresenter" Property="TextBlock.Foreground" Value="#FF000000"/>
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="False">
              <Setter TargetName="contentPresenter" Property="TextBlock.Foreground" Value="#78999999"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

これを別のファイルに入れて、ToggleButtonStyle3.xamlと呼びます。それから私はそれをこのように使います：

<Window.Resources>
  <ResourceDictionary>
    <Style ....
    </Style>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Resources/ToggleButtonStyle3.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>
....

         <ToggleButton Name       ="btnShowAlerts"
                      IsChecked  ="{Binding Path=ShowAlerts, Mode=TwoWay}"
                      Style      ="{StaticResource ToggleButtonStyle3}"
                      Content    ="alerts"
                      FontSize   ="9"
                      Padding    ="8,2"
                      Margin     ="0"
                      ClickMode  ="Press"
                      />

それが最善の方法かどうかはわかりません。デスクトップの「テーマ」に合わないことは知っています。私はそれがおそらくかなり基本的であることを知っています。色が変わったToggleButtonを入手する方法を理解するのにかなりの時間がかかったことを知っています。

于 2011-09-07T01:48:04.997 に答える