Можно ли динамически изменять стиль элемента, используя только XAML в UWP? - PullRequest
0 голосов
/ 16 апреля 2019

Когда курсор находится над элементом, я хочу динамически изменить его стиль.

Я знаю, что для Control я могу сделать это, используя ControlTemplate и VisualStateManager.

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ControlTemplate x:Key="ControlTemplate" TargetType="ContentControl">
            <Grid x:Name="RootGrid" Width="100" Height="100" Background="Red" PointerEntered="RootGrid_PointerEntered" PointerExited="RootGrid_PointerExited">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Active">
                            <VisualState.Setters>
                                <Setter Target="RootGrid.Background" Value="Blue"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </Page.Resources>

    <Grid>
        <ContentControl Template="{StaticResource ControlTemplate}"/>
    </Grid>

</Page>

    public sealed partial class BlankPage1 : Page {

        public BlankPage1() {
            this.InitializeComponent();
        }

        private void RootGrid_PointerEntered(object sender,PointerRoutedEventArgs e) {
            if (VisualTreeHelper.GetParent((Grid)sender) is ContentControl control) VisualStateManager.GoToState(control,"Active",false);
        }

        private void RootGrid_PointerExited(object sender,PointerRoutedEventArgs e) {
            if (VisualTreeHelper.GetParent((Grid)sender) is ContentControl control) VisualStateManager.GoToState(control,"Normal",false);
        }

    }

Однако приведенный выше код применяется только к Control классам и должен использовать код C #, что неудобно в некоторых ситуациях.

Например, у меня есть Grid вследующий код, и когда курсор находится над ним, я хочу изменить его цвет фона на синий, могу ли я сделать это, используя только XAML?

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Grid Width="100" Height="100" Background="Red"/>
    </Grid>

</Page>

Ответы [ 2 ]

0 голосов
/ 28 апреля 2019

Теперь я уверен, что есть решение для моего вопроса. Я могу сделать это с помощью простого кода xaml.

0 голосов
/ 16 апреля 2019

Вот лучший пример того, как я бы этого достиг. Теперь это не все, что вам нужно для инициализации раскадровки. но вы можете использовать это практически на любом элементе. Очевидно, вы можете поиграть, чтобы получить различные эффекты.

<Page
    x:Class="World.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
   <Storyboard x:Name="sbGridb">
<ColorAnimation
                Storyboard.TargetName="myAnimatedBrush"
                Storyboard.TargetProperty="(Grid.Background). 
                (SolidColorBrush.Opacity)" 
                EnableDependentAnimation ="True"
                From="(W.e you want)" To="(The same or w.e els you want)" Duration="0:0:2" AutoReverse="True" 
                RepeatBehavior="Forever" />
     </Storyboard>
    </Page.Resources>

    <Grid x:Name="myGrid">
      <Grid.Background>
          <SolidColorBrush x:Name ="myAnimatedBrush" Color="DodgerBlue" 
           Opacity="1"/>
       </Grid.Background>
      <Grid Width="100" Height="100" Background="Red"/>
    </Grid>

</Page>


public main(){

    this.InitializeComponent();
    this.sbGridb.Begin();
}

Надеюсь, это поможет немного больше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...