XAML,在动画中移动两个contentcontrol内的按钮
是否有可能移动一个按钮内的两个内容控件,并调整这个按钮的大小?XAML,在动画中移动两个contentcontrol内的按钮
<Button Height="100" Width="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition height="30"/>
<RowDefinition height="30"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="img.jpg"/>
<TextBlock Grid.Row="1" Text="Some content"/>
</Grid>
</Button>
我想垂直对齐他们水平而不是在鼠标悬停和调整100按钮50,这可能吗?
这可以用风格来实现:
<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="uGrid" Property="Columns" Value="2" />
<Setter TargetName="uGrid" Property="Rows" Value="1" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这种风格定义了一个修改过的模板为您的按钮,并可以利用触发器来响应鼠标事件。
的风格添加到您的按钮,请执行下列操作:
<Grid>
<Grid.Resources>
<!-- Put Style Here -->
</Grid.Resources>
<Button Style="{DynamicResource ExampleButtonStyle}">
<TextBlock Grid.Row="1" Text="Some content"/>
</Button>
</Grid>
你如何分配的样式和控件实例之间的代码是由你。您可能希望保持模块化和可重用性。
解剖样式
,如果你以前没有探索的风格,他们可以是一个有点令人生畏和冗长。我已经解释了下面提供的风格的组件。
您可以通过声明样式来开始新的样式。在这里,你必须提名一个目标类型(您想应用的样式是什么)和密钥(样式资源的名称:
二传手被用于制作风格<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<!-- Style content goes here. -->
</Style>
应用价值为目标控件的属性例如:。
<Setter Property="Background" Value="LightGray"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
因为要更改按钮的布局,你会想提名控件模板要做到这一点,用二传手设定按钮的Template属性这里的模板可以包含您想要的任何布局。ContentPresenter用于显示您的实现中Button标签的主体:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<!-- Triggers here -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
最后,您需要添加触发器以使控件模板更新与交互。触发器基本上观察控件的属性,并在其值与触发器指定的值相匹配时应用。这将使用内部的setter更新控件。
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
布局
为了实现我用UniformGrid布局的目标。 UniformGrid将自身分成相等的单元格以匹配内部的内容项目数量。请注意,这在WPF中可用,但不能在UWP中使用。在UniformGrid上,您可以设置“列”或“行数”,并根据需要对网格进行补偿。在上面的样式中,我改变了提名的行数和列数,并让网格相应地调整自己的布局。这从视觉上将内容从行切换到列。
参与讨论
有可能做到这一点更优雅等方法,但样式提供了大量的灵活性,并且具有更小的学习曲线。
你说你想将按钮尺寸从100更改为50(我假设在两个轴上?),我必须告诉你不要这样做。你会看到当你应用提供的风格时会发生什么;该按钮以100x100平方开始。用户将鼠标移动到按钮上方,直到按钮的边缘内。该按钮从50x50迅速变为100x100,直到鼠标完全移动到中心或关闭按钮。这提供了一个糟糕和令人困惑的用户体验,值得更多思考。
这可能是晚了,但根据什么都在评论中有人说,这可能做的伎俩,我对类似工作最近
<Style x:Key="btnSubMenu" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="ExtraBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid x:Name="uGrid2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Images/1.png" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid Grid.Row="2" Name="Gbexample" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCity}" Name="btnCity"/>
<Button Grid.Row="1" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCountry}" Name="btnCountry"/>
<Button Grid.Row="2" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strStore}" Name="btnStoreIn"/>
<Button Grid.Row="3" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strLocation}" Name="btnLocation"/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
暂时没有评论!嗯,我不知道如何谢谢,这是太多了...谢谢你无限 –
聚苯乙烯:关于按钮的大小,这是一个很好的观点,我会看到如果它不会给用户带来麻烦,但我不得不说我只是改变高度而不是宽度,它是某种滑动菜单,一旦高度为50,拼接网格将在空闲时增加50 ...可能会令人困惑^^“ –
没问题。它可能是更容易将这种折叠行为放到按钮中,因此同样的触发器可以“解开它”,如果它在按钮中,你可以避免快速变化的问题,尽管用网格很容易想到事情,你可能会发现它更容易更改其他属性来模拟相同的行为,例如边距和填充,例如,在某个东西下面显示一个网格,可能类似于在下面添加一个边距。随着XAML的增长,像这样的东西可以使阅读起来不那么让人困惑。IE网格是用于布局的,而不是广告临时定位。 – Gui