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

首先，您应修复样式，使其具有重复属性Height和<Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}" >。

然后，您应该为背景效果。您应该将其绑定到网格。

Background

应该将网格Button设置为绑定x:Key背景。

您应该删除所有Foo。

如果要在代码中设置Image，则应设置数据上下文。

我开设了一个课程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

该代码使用<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>，您可以对其进行更改。

然后我应该使用bind绑定数据上下文，并且CustomButtonLarge的所有代码都是

        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
        }

我尝试运行它并将屏幕剪辑到您身上。

如果要添加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>。

{{1}}

您应该像这样将代码添加到AlbumContentGrid中。

添加代码后，您可以看到点击动画。

在自定义应用程序中访问ControlTemplate样式。

1 个答案: