Geek asks and answers

How to Convert Expander Style to WPF in Silverlight

I have the following xaml style in WPF and I would like to put it in silverlight. I'm having problems with ControlTemplate triggers that are not in silverlight. I tried Interaction.Triggers, but it does not work. How to convert ControlTemplate triggers to something similar in silverlight?

<Style x:Key="ImageExpander" TargetType="Expander">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Expander">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Name="ContentRow" Height="0"/>
                </Grid.RowDefinitions>
                <Border Name="Border" Grid.Row="0">
                    <Border.Background>
                        <ImageBrush ImageSource="image.png" Stretch="Fill" />
                    </Border.Background>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True"></ContentPresenter>
                        <ToggleButton Grid.Column="1" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Template="{StaticResource ImageExpanderToggleButton}"/>
                    </Grid>
                </Border>
                <Border Name="Content" Grid.Row="1">
                    <ContentPresenter Margin="0" />
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsExpanded" Value="True">
                    <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Thanks in advance.

+3
source share
1 answer

In general, the concept of property triggers in WPF is usually replaced by visual states in Silverlight. In the case of the Expander.IsExpanded property, this corresponds to the expanded visual state.

So in your template you will need something like:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ExpansionStates">
            <VisualState x:Name="Collapsed"/>
            <VisualState x:Name="Expanded">
                <Storyboard>
                    ... (some animation)
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    ...
 </Grid>
0
source

More articles:


All Articles