ListBox要素のVisualStateを変更してください

StackOverflow https://stackoverflow.com//questions/24059076

質問

私は私がItemtStemplateを作ったリスボックスを持っています。このitemtemplate visualStateを変更したい要素を持っていますが、問題は状態を変更する方法がわからない。これは私がこれまでに持っているものです。

<ListBox Name="My_LB" ItemsSource="{Binding Users}"  Canvas.Left="45.8256" Canvas.Top="39.3065" Canvas.ZIndex="2" ScrollViewer.VerticalScrollBarVisibility="Disabled">                            
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Ellipse x:Name="user_ellipse" Width="7.87566" Height="7.87563" Canvas.Left="25.3505" Canvas.Top="5.08428e-005" Stretch="Fill" StrokeThickness="1.6" StrokeLineJoin="Round" Stroke="#FF000000">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="IsTurn">
                                                <VisualState x:Name="PlayersTurn">
                                                    <Storyboard>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"/>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"/>
                                                        <ColorAnimation To="Yellow" Storyboard.TargetName="user_ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup> 
                                    </VisualStateManager.VisualStateGroups>
                                    <Ellipse.Fill>
                                        <RadialGradientBrush RadiusX="0.651141" RadiusY="0.651175" Center="0.380114,0.308228" GradientOrigin="0.380114,0.308228">
                                            <RadialGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <RotateTransform CenterX="0.380114" CenterY="0.308228" Angle="47.4886"/>
                                                    </TransformGroup>
                                                </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#FF9F9065" Offset="0"/>
                                            <GradientStop Color="#FF4F4832" Offset="0.685767"/>
                                            <GradientStop Color="#FF000000" Offset="1"/>
                                        </RadialGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </Canvas>
                        </Viewbox>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
.

これは私が今までのところ、とにかく私が州を始めるのを助けることができるだけであれば、それは理解されるでしょう。

可能であれば、私のViewModelのパラメータに応じて状態を変更したいです.MVVMデザインを使用しています、私はこの soltuion 。しかし、私は" b "の名前空間を知りません。

アップデート 私は私の楕円をボタンに変更し、私のResourceDictionaryのボタンのスタイルを作ったので、今すぐのものです。

メインページ：

 <ListBox Name="My_LB" ItemsSource="{Binding Users}"  Canvas.Left="45.8256" Canvas.Top="39.3065" Canvas.ZIndex="2" ScrollViewer.VerticalScrollBarVisibility="Disabled">                            
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
<Button Name="Shield_Light" Canvas.Left="25.3505" Canvas.Top="5.08428e-005" Style="{StaticResource Style1}"/>

                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
.

そして私のresourceDictionaryでは私は狙っています：

<Style x:Key="Style" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Ellipse x:Name="Ellipse_Light" Width="7.87566" Height="7.87563" Stretch="Fill" StrokeThickness="1.6" StrokeLineJoin="Round" Stroke="#FF000000" Fill="Red">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommomStates">
                            <VisualState x:Name="IsNotTurn"/>
                            <VisualState x:Name="IsTurn">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Ellipse_Light" Storyboard.TargetProperty="Fill" To="Yellow"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Ellipse>
            </ControlTemplate>
        </Setter.Value>
    </Setter>


</Style>
.

しかし、私はまだ黄色に変わるような視覚的なステートをどのように変更するかわからない。

役に立ちましたか？

解決

更新されたバージョンで行ったように、代わりに楕円をボタンにすることをお勧めします。しかし、ストーリーボードのあなたのTargetPropertyが正しく設定されていません、あなたはそれが次のためにそれを：

Storyboard.Targetproperty ="(Fill).(SolidColorBrush.Color)"
.

ビジュアルステートを後ろのコードから変更したい場合は、ボタンを見つけてから、その状態を変更してください。私は私を助けたこれら2つの例を見つけました：

1

2

それはVisualTrehelperとobj.findnameを介してボタンを見つけます。

あなたがビューモデルからVisualStateを変更したい場合は、添付のプロパティを作るべきです、これら2つのサイトはこれを使うのに役立ちます：

3

4

他のヒント

上記のコード

を使用できます。 
 VisualStateManager.GoToState(this, "PlayersTurn", false);
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top