【WPF】如何让button按钮从中心向四周变化大小

Dear200892 2019-08-13 04:36:09
在Canvas中,有一个button按钮,
现在我点击它,希望能够让它从中心向四周变化大小!
求一份后端代码!!
...全文
151 点赞 收藏 9
写回复
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
desperaso 2019-08-22
也是才学wpf,button变化帮不上忙,后端处理可以参考。
比如实现旋转动画的后端实现举例,不用xaml,可能有错误改改

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Media3D;

public class RotatingEffect
{
private AxisAngleRotation3D axisAngleRotation;
private double delay;

/// <summary>
/// 3D 旋转切换组件
/// </summary>
/// <param name="width">宽度</param>
/// <param name="height">高度</param>
/// <param name="direction">旋转方向 0-横向 1-纵向</param>
/// <param name="control_First">正面显示的组件</param>
/// <param name="control_Second">背面显示的组件</param>
/// <param name="timeDelay">动画时长</param>
/// <returns>Viewport3D 组件</returns>
public Viewport3D rotatingEffect(double width, double height, int direction, UserControl control_First, UserControl control_Second, double timeDelay)
{
delay = timeDelay;
double Mesh_Width = width / 2;
double Mesh_Height = height / 2;

Viewport3D viewport3D = new Viewport3D();
PerspectiveCamera perspectiveCamera = new PerspectiveCamera()
{
Position = new Point3D(0, 0, width * 2), // 可调整
LookDirection = new Vector3D(0, 0, -1),
NearPlaneDistance = 100 // 可调整
};
viewport3D.Camera = perspectiveCamera;
ContainerUIElement3D containerUIElement3D = new ContainerUIElement3D();
DiffuseMaterial diffuseMaterial = new DiffuseMaterial();
Viewport2DVisual3D.SetIsVisualHostMaterial(diffuseMaterial, true);
MeshGeometry3D MeshGeometry_1 = new MeshGeometry3D()
{
TriangleIndices = new Int32Collection(new int[] { 0, 1, 2, 0, 2, 3 }),
TextureCoordinates = new PointCollection(new Point[] { new Point(0, 0), new Point(0, 1), new Point(1, 1), new Point(1, 0) }),
Positions = new Point3DCollection(new Point3D[] {
new Point3D(-Mesh_Width, Mesh_Height, 0),
new Point3D(-Mesh_Width, -Mesh_Height, 0),
new Point3D(Mesh_Width, -Mesh_Height, 0),
new Point3D(Mesh_Width, Mesh_Height, 0)
})
};
Viewport2DVisual3D viewport2DVisual3D_1 = new Viewport2DVisual3D()
{
Geometry = MeshGeometry_1,
Visual = control_First,
Material = diffuseMaterial
};
PointCollection Direction;
Vector3D vector3D;
if (direction == 0)
{
Direction = new PointCollection(new Point[] { new Point(0, 0), new Point(0, 1), new Point(1, 1), new Point(1, 0) });
vector3D = new Vector3D(0, 1, 0);
}
else
{
Direction = new PointCollection(new Point[] { new Point(1, 1), new Point(1, 0), new Point(0, 0), new Point(0, 1) });
vector3D = new Vector3D(1, 0, 0);
}
MeshGeometry3D MeshGeometry_2 = new MeshGeometry3D()
{
TriangleIndices = new Int32Collection(new int[] { 0, 1, 2, 0, 2, 3 }),
TextureCoordinates = Direction,
Positions = new Point3DCollection(new Point3D[] {
new Point3D(Mesh_Width, Mesh_Height, 0),
new Point3D(Mesh_Width, -Mesh_Height, 0),
new Point3D(-Mesh_Width, -Mesh_Height, 0),
new Point3D(-Mesh_Width, Mesh_Height, 0)
})
};
Viewport2DVisual3D viewport2DVisual3D_2 = new Viewport2DVisual3D()
{
Geometry = MeshGeometry_2,
Visual = control_Second,
Material = diffuseMaterial
};
containerUIElement3D.Children.Add(viewport2DVisual3D_1);
containerUIElement3D.Children.Add(viewport2DVisual3D_2);
axisAngleRotation = new AxisAngleRotation3D()
{
Angle = 0,
Axis = vector3D
};
RotateTransform3D rotateTransform3D = new RotateTransform3D()
{
CenterX = 0.5,
CenterY = 0.5,
CenterZ = 0.5,
Rotation = axisAngleRotation
};
containerUIElement3D.Transform = rotateTransform3D;
ModelVisual3D modelVisual3D = new ModelVisual3D()
{
Content = new DirectionalLight(Colors.Transparent, new Vector3D(0, 0, -1))
};
viewport3D.Children.Add(containerUIElement3D);
viewport3D.Children.Add(modelVisual3D);
return viewport3D;
}

/// <summary>
/// 旋转角度
/// </summary>
/// <param name="degrees">角度</param>
public void Turn(double degrees)
{
DoubleAnimation da = new DoubleAnimation();
da.Duration = new Duration(TimeSpan.FromSeconds(delay));
da.To = degrees;
axisAngleRotation.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);
}
}
回复
desperaso 2019-08-22
引用 7 楼 Dear200892 的回复:
非常感谢!!我只是单纯的想满足条件的时候按钮从中心向四周变化大小


这样不就是后端写么,不用xaml文件,直接cs代码生成。其他变化这个方法改就可以,

XmlTextReader xmlreader = new XmlTextReader(strreader);
object obj = XamlReader.Load(xmlreader);
ResourceDictionary _ControlStyle = (ResourceDictionary)obj;
Resources.MergedDictionaries.Add(_ControlStyle);
textBox.Style = Resources[StyleName] as Style;
生成再执行就可以
回复
Dear200892 2019-08-22
引用 6 楼 desperaso 的回复:
在cs里写例如:

//点击应用
        private void btn_Click(object sender, RoutedEventArgs e)
        {
            DynamicStyle( textBoxShow,......);
        }
 
        /// <summary>
        /// 动态设置样式
        /// </summary>
        ///<param name="StyleName">样式名称</param>
        /// <param name="StyleName">样式名称</param>
        /// <param name="BorderColor">初始边框色</param>
        /// <param name="MouseOverColor">鼠标离开边框色</param>
        /// <param name="FocuseColor">焦点边框色</param>
        /// <param name="TextPading">文字距离边框</param>
        /// <param name="Radius">圆角度数</param>
        /// <param name="GradientBegin">背景渐变起始色</param>
        /// <param name="GradientEnd">背景渐变结束色</param>
        /// <returns></returns>
        public void DynamicStyle (
            TextBox textBox,
            string StyleName,
            string BorderColor, string MouseOverColor, string FocuseColor, 
            string TextPading, int Radius,
            string GradientBegin, string GradientEnd)
        {
            Resources.Remove(StyleName);
            string _style = @"
            <ResourceDictionary xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
                <SolidColorBrush x:Key='TextBox.Static.Border' Color='"+ BorderColor + @"'/>
                <SolidColorBrush x:Key='TextBox.MouseOver.Border' Color='"+ MouseOverColor + @"'/>
                <SolidColorBrush x:Key='TextBox.Focus.Border' Color='"+ FocuseColor + @"'/>
                <Style x:Key='"+ StyleName + @"' TargetType='{x:Type TextBox}'>
                    <Setter Property='Background' Value='{DynamicResource {x:Static SystemColors.WindowBrushKey}}'/>
                    <Setter Property='BorderBrush' Value='{StaticResource TextBox.Static.Border}'/>
                    <Setter Property='Foreground' Value='{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}'/>
                    <Setter Property='BorderThickness' Value='1'/>
                    <Setter Property='KeyboardNavigation.TabNavigation' Value='None'/>
                    <Setter Property='HorizontalContentAlignment' Value='Left'/>
                    <Setter Property='VerticalContentAlignment' Value='Center'/>
                    <Setter Property='FocusVisualStyle' Value='{x:Null}'/>
                    <Setter Property='AllowDrop' Value='true'/>
                    <Setter Property='ScrollViewer.PanningMode' Value='VerticalFirst'/>
                    <Setter Property='Stylus.IsFlicksEnabled' Value='False'/>
                    <Setter Property='Padding' Value='"+ TextPading + @"'/>
                    <Setter Property='Template'>
                        <Setter.Value>
                            <ControlTemplate TargetType='{x:Type TextBox}'>
                                <Border x:Name='border' BorderBrush='{TemplateBinding BorderBrush}' BorderThickness='{TemplateBinding BorderThickness}'  SnapsToDevicePixels='True' CornerRadius='"+ Radius + @"'>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint='0.5,1' StartPoint='0.5,0'>
                                            <GradientStop Color='"+ GradientBegin + @"' Offset='0'/>
                                            <GradientStop Color='"+ GradientEnd + @"' Offset='1'/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <ScrollViewer x:Name='PART_ContentHost' Focusable='false' HorizontalScrollBarVisibility='Hidden' VerticalScrollBarVisibility='Hidden'></ScrollViewer>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property='IsEnabled' Value='false'>
                                        <Setter Property='Opacity' TargetName='border' Value='0.56'/>
                                    </Trigger>
                                    <Trigger Property='IsMouseOver' Value='true'>
                                        <Setter Property='BorderBrush' TargetName='border' Value='{StaticResource TextBox.MouseOver.Border}'/>
                                    </Trigger>
                                    <Trigger Property='IsKeyboardFocused' Value='true'>
                                        <Setter Property='BorderBrush' TargetName='border' Value='{StaticResource TextBox.Focus.Border}'/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property='IsInactiveSelectionHighlightEnabled' Value='true'/>
                                <Condition Property='IsSelectionActive' Value='false'/>
                            </MultiTrigger.Conditions>
                            <Setter Property='SelectionBrush' Value='{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}'/>
                        </MultiTrigger>
                    </Style.Triggers>
                </Style>
            </ResourceDictionary>
            ";
            StringReader strreader = new StringReader(_style);
            XmlTextReader xmlreader = new XmlTextReader(strreader);
            object obj = XamlReader.Load(xmlreader);
            ResourceDictionary _ControlStyle = (ResourceDictionary)obj;
            Resources.MergedDictionaries.Add(_ControlStyle);
            textBox.Style = Resources[StyleName] as Style;
        }
非常感谢!!我只是单纯的想满足条件的时候按钮从中心向四周变化大小
回复
desperaso 2019-08-22
在cs里写例如:

//点击应用
private void btn_Click(object sender, RoutedEventArgs e)
{
DynamicStyle( textBoxShow,......);
}

/// <summary>
/// 动态设置样式
/// </summary>
///<param name="StyleName">样式名称</param>
/// <param name="StyleName">样式名称</param>
/// <param name="BorderColor">初始边框色</param>
/// <param name="MouseOverColor">鼠标离开边框色</param>
/// <param name="FocuseColor">焦点边框色</param>
/// <param name="TextPading">文字距离边框</param>
/// <param name="Radius">圆角度数</param>
/// <param name="GradientBegin">背景渐变起始色</param>
/// <param name="GradientEnd">背景渐变结束色</param>
/// <returns></returns>
public void DynamicStyle (
TextBox textBox,
string StyleName,
string BorderColor, string MouseOverColor, string FocuseColor,
string TextPading, int Radius,
string GradientBegin, string GradientEnd)
{
Resources.Remove(StyleName);
string _style = @"
<ResourceDictionary xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
<SolidColorBrush x:Key='TextBox.Static.Border' Color='"+ BorderColor + @"'/>
<SolidColorBrush x:Key='TextBox.MouseOver.Border' Color='"+ MouseOverColor + @"'/>
<SolidColorBrush x:Key='TextBox.Focus.Border' Color='"+ FocuseColor + @"'/>
<Style x:Key='"+ StyleName + @"' TargetType='{x:Type TextBox}'>
<Setter Property='Background' Value='{DynamicResource {x:Static SystemColors.WindowBrushKey}}'/>
<Setter Property='BorderBrush' Value='{StaticResource TextBox.Static.Border}'/>
<Setter Property='Foreground' Value='{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}'/>
<Setter Property='BorderThickness' Value='1'/>
<Setter Property='KeyboardNavigation.TabNavigation' Value='None'/>
<Setter Property='HorizontalContentAlignment' Value='Left'/>
<Setter Property='VerticalContentAlignment' Value='Center'/>
<Setter Property='FocusVisualStyle' Value='{x:Null}'/>
<Setter Property='AllowDrop' Value='true'/>
<Setter Property='ScrollViewer.PanningMode' Value='VerticalFirst'/>
<Setter Property='Stylus.IsFlicksEnabled' Value='False'/>
<Setter Property='Padding' Value='"+ TextPading + @"'/>
<Setter Property='Template'>
<Setter.Value>
<ControlTemplate TargetType='{x:Type TextBox}'>
<Border x:Name='border' BorderBrush='{TemplateBinding BorderBrush}' BorderThickness='{TemplateBinding BorderThickness}' SnapsToDevicePixels='True' CornerRadius='"+ Radius + @"'>
<Border.Background>
<LinearGradientBrush EndPoint='0.5,1' StartPoint='0.5,0'>
<GradientStop Color='"+ GradientBegin + @"' Offset='0'/>
<GradientStop Color='"+ GradientEnd + @"' Offset='1'/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer x:Name='PART_ContentHost' Focusable='false' HorizontalScrollBarVisibility='Hidden' VerticalScrollBarVisibility='Hidden'></ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property='IsEnabled' Value='false'>
<Setter Property='Opacity' TargetName='border' Value='0.56'/>
</Trigger>
<Trigger Property='IsMouseOver' Value='true'>
<Setter Property='BorderBrush' TargetName='border' Value='{StaticResource TextBox.MouseOver.Border}'/>
</Trigger>
<Trigger Property='IsKeyboardFocused' Value='true'>
<Setter Property='BorderBrush' TargetName='border' Value='{StaticResource TextBox.Focus.Border}'/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property='IsInactiveSelectionHighlightEnabled' Value='true'/>
<Condition Property='IsSelectionActive' Value='false'/>
</MultiTrigger.Conditions>
<Setter Property='SelectionBrush' Value='{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}'/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
";
StringReader strreader = new StringReader(_style);
XmlTextReader xmlreader = new XmlTextReader(strreader);
object obj = XamlReader.Load(xmlreader);
ResourceDictionary _ControlStyle = (ResourceDictionary)obj;
Resources.MergedDictionaries.Add(_ControlStyle);
textBox.Style = Resources[StyleName] as Style;
}
回复
Dear200892 2019-08-21
引用 4 楼 不远1210 的回复:
wpf在能用模板的时候就不要考虑什么后端代码了。 就算非要用后端代码,按照这个前端代码创建两个Storyboadrd,在你需要触发的时候,用动画实现就可以了。
受教了!!待会去试试!!
回复
不远1210 2019-08-20
wpf在能用模板的时候就不要考虑什么后端代码了。 就算非要用后端代码,按照这个前端代码创建两个Storyboadrd,在你需要触发的时候,用动画实现就可以了。
回复
Dear200892 2019-08-14
引用 2 楼 github_36000833 的回复:

<Grid>
    <Button Content="Hello" Width="100" Height="100" RenderTransformOrigin="0.5, 0.5" >
        <Button.Resources>
            <Storyboard x:Key="expand">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="2" Duration="0:0:0.3" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="2" Duration="0:0:0.3" />
            </Storyboard>
            <Storyboard x:Key="reset">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.1" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.1" />
            </Storyboard>
        </Button.Resources>
        <Button.RenderTransform>
            <ScaleTransform  ScaleX="1" ScaleY="1"/>
        </Button.RenderTransform>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource ResourceKey=expand}"  />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource ResourceKey=reset}" />
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>
我需要的是后端代码,不过也很谢谢你!
回复
github_36000833 2019-08-13

<Grid>
    <Button Content="Hello" Width="100" Height="100" RenderTransformOrigin="0.5, 0.5" >
        <Button.Resources>
            <Storyboard x:Key="expand">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="2" Duration="0:0:0.3" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="2" Duration="0:0:0.3" />
            </Storyboard>
            <Storyboard x:Key="reset">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.1" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.1" />
            </Storyboard>
        </Button.Resources>
        <Button.RenderTransform>
            <ScaleTransform  ScaleX="1" ScaleY="1"/>
        </Button.RenderTransform>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource ResourceKey=expand}"  />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource ResourceKey=reset}" />
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>
回复
XBodhi. 2019-08-13
代码现在没有时间写,这个有点复杂,不过可以给你个思路,
你先获取 按钮的 宽度和高度,然后确定按钮的圆心点然后对高度和宽度除以 2 等比增长就可以了。
回复
发动态
发帖子
C#
创建于2007-09-28

10.4w+

社区成员

.NET技术 C#
申请成为版主
社区公告

全世界最好的语言,没有之一.