在自定義應用程序中訪問ControlTemplate樣式。

Question

我為按鈕創建了模板樣式，我想為項目中的每個相冊調用該按鈕。

<Application.Resources>
    <Style x:Key="CustomButtonLarge" TargetType="Button">
        <Setter Property="Background" Value="Pink" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Width" Value="300" />
        <Setter Property="Height" Value="100" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Height" Value="300" />
        <Setter Property="Width" Value="200" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="AlbumContentGrid">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="200"/>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>

                        <Image Grid.Row="0" source="null" x:Key="albumCover" />
                        <Textblock Grid.Row="1" x:Key="Title" Style="{StaticResources CustomForegroundTitleText}"/>
                        <Textblock Grid.Row="2" x:Key="SubTitle" Style="{StaticResources CustomForegroundSubTitleText}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Application.Resources>

當我在后面的代碼中時，我想為每個專輯創建此按鈕。 所以如果有3張專輯，我想做個for循環...

int numberOfButtons= 3;

private void Page_Loaded(object sender, RoutedEventArgs e)
    {

        for (int i = 0; i < numberOfButtons; i++)
        {
            Button btn = new Button();
            Style style = App.Current.Resources["CustomButtonLarge"] as Style;

            btn.Style = style;

            StackAlbums.Children.Add(btn);
        }

    }

StackAlbums是主網格中的stackPanel。 由於某種原因，我跑步時什么也沒得到。

但是我也不確定如何訪問“ albumCover”圖像，以便可以將源更改為代碼中所需的任何內容，並更改“標題”和“子標題”文本塊的文本值。

Answer 1

首先，您應該修復樣式，使樣式具有重復的屬性width和Height 。

然后，您應該為背景效果。 您應該將其綁定到網格。

                    <Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}" >

網格應設置為Background以綁定Button背景。

並且您應該刪除所有x:Key 。

如果要在代碼中設置Image，則應設置數據上下文。

我讓Foo上課。

public class Foo
{
    public BitmapImage Image { get; set; }

    public string Title { get; set; }

    public string  SubTitle { get; set; }
}

我應該在添加按鈕時進行設置。

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        int numberOfButtons = 3;


        for (int i = 0; i < numberOfButtons; i++)
        {
            var foo = new Foo
            {
                Image = new BitmapImage(new Uri("ms-appx:///Assets/Square44x44Logo.scale-200.png")),
                Title = "title" + i,
                SubTitle = i.ToString()
            };

            Button btn = new Button();
            Style style = Application.Current.Resources["CustomButtonLarge"] as Style;

            btn.Style = style;

            btn.DataContext = foo;

            StackAlbums.Children.Add(btn);
        }
    }

該代碼使用Square44x44Logo.scale-200.png ，您可以對其進行更改。

然后，我應該使用bind綁定數據上下文，並且CustomButtonLarge的所有代碼都是

<Application.Resources>
    <Style x:Key="CustomButtonLarge" TargetType="Button">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Margin" Value="10,10,10,10"></Setter>
        <Setter Property="Height" Value="200" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button" >
                    <Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="200*"/>
                            <RowDefinition Height="50*"/>
                            <RowDefinition Height="50*"/>
                        </Grid.RowDefinitions>

                        <Image Grid.Row="0" x:Name="AlbumCover" Source="{Binding Path=Image}"/>
                        <TextBlock Grid.Row="1" x:Name="Title" Text="{Binding Title}" Foreground="{TemplateBinding Foreground}"/>
                        <TextBlock Grid.Row="2" x:Name="SubTitle" Text="{Binding SubTitle}" Foreground="{TemplateBinding Foreground}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

我嘗試運行它，然后將屏幕剪輯到您身上。

如果要添加click事件，則應添加一些代碼。

        for (int i = 0; i < numberOfButtons; i++)
        {
            var foo = new Foo
            {
                Image = new BitmapImage(new Uri("ms-appx:///Assets/Square44x44Logo.scale-200.png")),
                Title = "title" + i,
                SubTitle = i.ToString()
            };

            Button btn = new Button();
            Style style = Application.Current.Resources["CustomButtonLarge"] as Style;

            btn.Style = style;

            btn.DataContext = foo;

            StackAlbums.Children.Add(btn);

            btn.Click += Button_OnClick; // Make the click
        }

然后，您應該編寫Button_OnClick並添加斷點以知道用戶單擊了按鈕。

    private void Button_OnClick(object sender, RoutedEventArgs e)
    {
        Debug.WriteLine(StackAlbums.Children.Count);
        Debug.WriteLine((StackAlbums.Children[0] as FrameworkElement)?.ActualWidth );
        Debug.WriteLine((StackAlbums.Children[0] as Button)?.Background?.ToString() ?? "");
    }

編輯

如果要添加單擊動畫，則應將代碼添加到VisualStateManager.VisualStateGroups 。

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                   Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="#aaaaaa" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubTitle"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="#aaaaaa" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                   Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubTitle"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

您應該像這樣將代碼添加到AlbumContentGrid中。

添加代碼后，您可以看到單擊動畫。