Question

I have been banging my head on this one for hours and I am hoping someone can point me in the correct direction.

I have a button within my view which has a click event and a command attached. The click event sets the visibility of a grid row to collapsed or visible based upon the current state.

xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition x:Name="DetailHolder" Height="*" />
    </Grid.RowDefinitions>
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="92.915" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button x:Name="DetailButton"
                Grid.Column="1"
                Width="107"
                Height="23"
                Margin="196,94,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click= "MoreDetail_Click"
                Command="{Binding GetCFSDetailCommand}"
                Content="View Details [+]" >
            <Button.DataContext>
                <mdc:SearchViewModel/>
            </Button.DataContext>
        </Button>
    </Grid>
    <Grid x:Name="MyDetail"
          Grid.Row="1"
          MinHeight="150"
          Visibility="Collapsed">
        <TextBlock Text="My Hidden Data" />
    </Grid>
</Grid>

The click command calls a method that tests the current visual state of the MyDetail section and expands or collapses it

The Command calls GetCFSDetailCommand from my viewModel etc

Where I am stuck is that I only want to call the Command GetCFSDetailCommand when the view is collapsed. The way it is set now is that command will fire every time the button is clicked. I can’t use ICommand CanExecute because I don’t want to disable the button. I’d appreciate any suggestions or ideas on how to go about achieving this. One thought was to test the visibility within the event code behind and then based upon that have the event call the Command. If this is the correct approach I would really appreciate a code sample as I have had no luck in calling the command from an event.

Thanks in advance

Answer 1

Set your Command property in a DataTrigger

<Button x:Name="DetailButton" Content="View Details [+]">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=MyDetail, Path=Visibility}"
                             Value="Collapsed">
                    <Setter Property="Command" Value="{Binding GetCFSDetailCommand}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
<Button>

The Command will be set when the MyDetail panel is collapsed. Otherwise, it is unbound and nothing will happen.