canard29 Ответов: 2

Wpf - шаблон кнопки

привет,

У меня есть много кнопок, определенных таким образом. Цель состоит в том, чтобы определить небольшой масштаб анимации при нажатии на кнопку. Я хотел бы определить шаблон для повторного использования одного и того же кода и просто определить его в качестве параметра . Я попробовал Решение ниже, но я не знаю, как управлять изображением, чтобы повторно использовать код. Не могли бы вы помочь, пожалуйста ? Я начинаю в WPF 

<Button Name="BTN_L" Margin="475,215,387,0" Padding="5" Background="Transparent" VerticalAlignment="Top" Height="224" Click="BTN_L_Click">
            <Button.Template>
                <ControlTemplate TargetType ="{x:Type Button}">
                    <Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid" Margin="1,0,4,4" >
                        <Image Source="pack://application:,,,/myNamespace;component/resources/L.png" Margin="0,0,-5,0"  />
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property ="IsPressed" Value ="True">
                            <Setter TargetName="RootGrid" Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.97" ScaleY="0.95"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>


Что я уже пробовал:

<UserControl.Resources>
     <Style x:Key="BTN_L" TargetType="Button">
         <Setter Property="Control.Template">
             <Setter.Value>
                 <ControlTemplate TargetType ="{x:Type Button}">
                     <Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid" Margin="1,0,4,4" >
                         <Image Source="pack://application:,,,/myNamespace;component/resources/L.png" Margin="0,0,-5,0"  />
                         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property ="IsPressed" Value ="True">
                             <Setter TargetName="RootGrid" Property="RenderTransform">
                                 <Setter.Value>
                                     <ScaleTransform ScaleX="0.97" ScaleY="0.95"/>
                                 </Setter.Value>
                             </Setter>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </UserControl.Resources>


А потом в коде : 
<Button Style="{StaticResource BTN_L}..."

2 Ответов

Рейтинг:
9

George Swan

Я бы сохранил ваше изображение в папке с именем Images В вашем приложении и установил его действие сборки В Resource. Затем вы можете добавить ресурс в окно следующим образом.


<Window.Resources>
      <Image x:Key="Info" Source="Images/Info.png"/>
  </Window.Resources>

Установите содержимое кнопки на изображение и используйте Storyboard и ScaleTransform чтобы изменить размер кнопки. В этом примере кнопка уменьшается на 0,95% от своего размера при нажатии в течение 0,2 секунды.


<Button
      Grid.Column="1" Grid.Row="0"
     Width="100" Height="50"
     Content="{StaticResource Info}" >
        <Button.RenderTransform>
           <ScaleTransform x:Name="ShrinkScaleTransform"
             ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
        </Button.RenderTransform>
           <Button.Triggers>
              <EventTrigger RoutedEvent="Button.Click">
                 <BeginStoryboard>
                   <Storyboard>
                     <DoubleAnimation
                        Storyboard.TargetName="ShrinkScaleTransform"
                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                        To="0.95" Duration="0:0:0.2" AutoReverse="True"
                      />
                     <DoubleAnimation
                        Storyboard.TargetName="ShrinkScaleTransform"
                        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                        To="0.95" Duration="0:0:0.2" AutoReverse="True"
                      />
                   </Storyboard>
                 </BeginStoryboard>
              </EventTrigger>
           </Button.Triggers>
   </Button>

Рейтинг:
14

Member 12270013

Вы можете использовать Растровое изображение для повторного использования изображений из разных источников

В разделе Ресурсы добавьте изображение: 

<BitmapImage x:Key="pic1" UriSource="https://cdn.pixabay.com/photo/2016/10/23/06/04/google-1762248_960_720.png" />
<BitmapImage x:Key="pic2" UriSource="https://cdn.pixabay.com/photo/2016/10/23/06/04/google-1762248_960_721.png" />


С помощью кнопки "Мне нравится" : 
 <Button ..>
 <Button.Content>
  <Image Source="{StaticResource pic1}" />
 </Button.Content>
</Button>



Через Отделенного Кода : 
Image image = new Image();
image.Source = FindResource("pic1");
OnBtn.Content = image;