Change color gradient when click button in C# (UWP)

Theo ngu kiến của mình thì bạn thử sử dụng Trigger trong ControlTemplate

Có thể cho mình xem ví dụ code chút đc ko, mình có thấy trên mạng trigger gì đó nhưng mình bỏ vào nó bảo ko có trigger gì đó nên mình ko bỏ đc bạn ạ.

Hi mmmm.

1. Bạn để nhầm tag rồi sửa lại C#.
2. Mình làm theo cái này OK. Bạn có thể đọc thêm các tut về style.

http://www.wpf-tutorial.com/styles/trigger-animations-enteractions-exitactions/

Hi Phong_Ky_Vo

1. Mình chỉ thấy tag c với C++, không thấy tag C# bạn ơi.
2. Cho mình hỏi ngu tí, vì ở đây mình ko có máy để test: mình thấy trên link bạn đưa đây là form Window , còn mình làm là bỏ vô có chấp nhận ko bạn

Hi mmmm

1. Bạn đi khám bện nhưng không mắc bện gì thì bác sĩ có tag bạn bị sâu răng không ?
2. Không nhầm thì nó là cú pháp của XAML.

Hi Phong_Ky_Vo
Cảm ơn bạn, bạn có thể bày mình cách search custom style textbox với button cho nó bo tròn đc ko, mình search nhưng ko ra được cách làm !

Hi mmmm.
Bạn học code theo tài liệu nào vậy ?
http://www.wpf-tutorial.com/misc-controls/the-border-control/

Ý mình không phải vầy, mình ko đc sử dụng Border bao ngoài vầy, mà custom ở bên file style, hôm qua minh có sử dụng cái này nhưng mà chỉnh button nhỏ lại thì nó sẽ hiện ra cái border, hoặc là cái border đó nó sẽ ép button hoặc textbox lại, làm mình phải code cứng chỉnh từng tý .

Ở bên file style (dictionary) bạn cần phải làm những cái sau:

Khai báo 1 gradient cho màu default của nút.

<LinearGradientBrush x:Key="DefaultButtonBackground" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FFE0E0E0" Offset="0"/>
            <GradientStop Color="#FFB0B0B0" Offset="1"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

Và 1 màu khi nhấn nút

<LinearGradientBrush x:Key="PressButtonBackground"  StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FFB0B0B0" Offset="0"/>
            <GradientStop Color="#FFE0E0E0" Offset="1"/>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

Bắt đầu chỉnh sửa ControlTemplate

<!-- Ở chỗ này đang là chỉnh Template. Tức là tất cả các nut mặc định sẽ thay đổi theo
Nếu muốn chỉ áp dụng cho 1 số nut thì thêm đoạn xác định key vào. Ví dụ
<Style TargetType="Button" x:Key="MyButtonStyle">
-->

<Style TargetType="Button">
        <!-- Set màu mặc định của nút -->
        <Setter Property="Background" Value="{DynamicResource DefaultButtonBackground}"/>
        <!-- Bắt đầu sửa ControlTemplate -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!-- Bao ngoài bút bằng 1 bor der có góc tròn 3 pixel, viền , màu viền, màu nền liên kết với Button-->
                    <Border Background="{TemplateBinding Background}" CornerRadius="3" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <!-- Bên trong border chứa ContentPresenter (chính là nội dung) của nút. Vị trí neo liên kết với button -->
                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    </Border>
                    <!-- Chỗ này bắt đầu sửa đến ControlTempalte Trigger. Thay đổi màu ở đây-->
                    <ControlTemplate.Triggers>
                        <!--Trong sự kiện Press-->
                        <Trigger Property="IsPressed" Value="True">
                            <!-- Thì đổi màu button sang gradient thứ 2. Border được liên kết background thì nó cũng đổi background theo-->
                            <Setter Property="Background" Value="{DynamicResource PressButtonBackground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Nếu là tempalte thì mọi nút sẽ tự động đổi template theo.
Nếu là style, để chỉ định nút nào được áp dụng style thì set style của nó

<!-- Với tên Style xác định bằng dòng x:Key="..."  trong file dictionary/>
<Button Style="{DynamicResource MyButtonStyle"} />

Trong universal window không dùng được trigger ạ

UWP thì bạn dùng blend custom style button là được:

<LinearGradientBrush x:Key="PressButtonBackground"  StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="Red" Offset="0.0"></GradientStop>
        <GradientStop Color="Yellow" Offset="0.5"></GradientStop>
        <GradientStop Color="Blue" Offset="1.0"></GradientStop>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="GradientButton" TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
    <Setter Property="Padding" Value="8,4,8,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="FocusVisualMargin" Value="-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PressButtonBackground}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Sử dụng

<Button Content="Button" Style="{StaticResource GradientButton}" />

Dạ, xin cảm ơn rất nhiều ạ.Đã làm được rồi ạ . Cho hỏi cách học, cách search với được không ạ, search như trên tiêu đề nhưng không ra được. Mới qua học universal window nên còn bỡ ngỡ ạ.

Search thì bạn cứ chuyển hết về tiếng anh rồi search là ra thôi. Bạn search không ra là do keyword đúng. Như vẫn đề của bạn thì bạn có thể search như Change button background when press button uwp. Bạn tìm hiểu thử Blend for Visual Studio để có thể thấy và edit template/style của các control.

Bạn ơi, bạn có làm Flipview phân trang mà có next 1 2 3 … previous chưa. Cho mình xin cách search với. Mình search mà bị gặp là, họ ko phân trang để ở dưới bottom hiện 123 như mình nói, toàn là flipview nhấn next và previous ngay trên chính giữa trang. Mình cũng có coi họ code window phone nhưng phức tạp , mình lấy code về nhưng bỏ vào toàn đỏ.

Mình search được với keyword Flipview and paging uwp
Bạn xem thử video demo, có source ở phần mô tả video:

Làm theo nhưng không được ạ. Hix. Bạn có từng làm chưa ạ

Mình chưa từng làm. Bạn làm được gì rồi và bị lỗi chỗ nào thì có thể post source code lên, mọi người có thể giúp.