Change property of a XAML control by changing value of a property in viewmodel

Asked

Viewed 73 times

1

I have a Page with this style:

inserir a descrição da imagem aqui

<Border Padding="{Binding InnerContentPadding}" >
    <Border>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" TextBlock.TextAlignment="Center">
                <Border Background="{StaticResource BackgroundLightBrush}" Margin="50 50 50 0" Padding="15 50 15 15" CornerRadius="10" Width="330">
                    <StackPanel>
                        <TextBlock Text="Sing Up" FontFamily="{StaticResource LatoRegular}" FontSize="30" Foreground="Blue"/>
                        <TextBlock Text="It's About to get fun" FontSize="20" Foreground="DarkCyan"/>

                        <TextBox Text="{Binding Email}" Style="{StaticResource textboxlogin}" Tag="Loguin"/>
                        <PasswordBox Name="PasswordText" PasswordChanged="PasswordBox_PasswordChanged"  Style="{StaticResource  textboxSenhalogin}" Tag="Senha"/>

                        <Button Command="{Binding LoginCommand}" HorizontalAlignment="Center" Content="Next"  />

                    </StackPanel>
                </Border>
                <Button Style="{StaticResource TextButton}" Content=" I already have a account" HorizontalAlignment="Center"/>
            </StackPanel>
        </ScrollViewer>
    </Border>
</Border>

I use the styles from a Resourcedictionary, and the orange button style is this.

 <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
    <Setter Property="Background" Value="DarkOrange" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="FontSize" Value="30" />
    <Setter Property="Padding" Value="50 10" />
    <Setter Property="Margin" Value="0 10" />

    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate  TargetType="{x:Type ButtonBase}">
                <Border x:Name="border" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <Grid>
                        <TextBlock Name="tbLoguin" 
                                   Text="{TemplateBinding Content}" 
                                   Focusable="False" 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                   Margin="{TemplateBinding Padding}"  
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        <Image Source="https://img.icons8.com/metro/26/000000/spinner-frame-4.png" Width="40"   Height="40" VerticalAlignment="Center" >

                            <Image.Style >
                                <Style TargetType="Image" >
                                    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <RotateTransform></RotateTransform>
                                        </Setter.Value>
                                    </Setter>

                                    <Style.Resources>
                                        <Storyboard x:Key="Spin">
                                            <DoubleAnimation
                                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                        From="0"
                                                        To="360"
                                                        Duration="0:0:2"
                                                        RepeatBehavior="Forever" />
                                        </Storyboard>
                                    </Style.Resources>

                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Trigger.EnterActions>
                                                <BeginStoryboard Name="SpinStoryboard" Storyboard="{StaticResource Spin}" />
                                            </Trigger.EnterActions>
                                            <Trigger.ExitActions>
                                                <RemoveStoryboard BeginStoryboardName="SpinStoryboard" />
                                            </Trigger.ExitActions>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                    </Grid>

                </Border>

                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter" >
                        <BeginStoryboard>
                            <Storyboard >
                                <ColorAnimation Duration="0:0:0.3" To="LightBlue" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                    <EventTrigger RoutedEvent="MouseLeave" >
                        <BeginStoryboard>
                            <Storyboard >
                                <ColorAnimation Duration="0:0:0.3" To="DarkOrange" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>


                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" TargetName="border" Value="pink"/>
                    </Trigger>

                    <DataTrigger Binding="{Binding LogisisRunning}" Value="True">
                        <Setter Property="Visibility" TargetName="tbLoguin" Value="Hidden"/>
                    </DataTrigger> 
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem is that when I click the button it can take X seconds to perform the task (which in case I put 2 seconds delay to test) and I need the text to disappear and the spinner to appear while the task is not completed. That is, while it is not clicked appears the text and when it is clicked appears the spinner until it finishes the action.

The button uses Command in Viewmodel to perform the action. I am using a Control Property public bool LoginIsRunning { get; set; } while the action is taking place the value of it is True.

What I’m not getting is to use this Property to change the design in XAML, how can I do this?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.