下面这种按钮就是我们要仿照的按钮样式
本次主要是将这些按钮排列成几行几列的形状,类似下图
一、方块按钮样式
<!--360方块按钮-->
<Style x:Key="BtnStyle360Block" TargetType="Button">
<Setter Property="Background" Value="White"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="1" BorderBrush="Transparent" Tag="{Binding}">
<Grid>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#F2F2F2"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
1、ListBox自带的天蓝色选中背景我们要首先解决:
<!--ListBox没有选择背景-->
<Style x:Key="ListBoxItemNoSelectedColorSyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2、ListBox多列显示、因为UniformGrid的特点就是排满行后自动换行。所以我们只设定列个数就好了
<!--ListBox 多列-->
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Foreground" Value="Black"/>
<!--无选中颜色-->
<Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemNoSelectedColorSyle}">
</Setter>
<!--模板容器样式-->
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="3" IsItemsHost="True">
</UniformGrid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!--模板内容样式-->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Button Name="btn" Tag="{Binding}" Height="76" Width="76" ToolTip="{Binding Name}" Style="{StaticResource BtnStyle360Block}">
<Button.Content>
<StackPanel >
<Image Width="40" Height="40" Margin="0,5,0,0" Source="{Binding Image}" Stretch="Fill" HorizontalAlignment="Center"/>
<Label Height="26" Foreground="{Binding ElementName=btn,Path=Foreground}" VerticalContentAlignment="Center" VerticalAlignment="Center" Content="{Binding Title}" Margin="0,0,0,-2"/>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
三、关于如何使用这个样式
<ListBox BorderThickness="0" ItemsSource="{Binding DownloadSoftModelList}" Style="{StaticResource ListBoxStyle}" Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
</ListBox>
四、关于按钮事件的问题
我如何获取ListBox选中的哪个按钮?要不然这个搞有什么意思?
经过我的多次试验。发现只有PreviewMouseUp 事件才会得到我们想要的按钮。
public void SelectionChanged(object sender,object eventArgs)
<pre name="code" class="csharp">{
<span style="white-space:pre"> </span>//只有PreviewMousUp才会触发事件 - 并且不会造成全局异常
if (eventArgs.GetType() == typeof(System.Windows.Input.MouseButtonEventArgs))
{
<span style="white-space:pre"> </span>Button btn = (UIElement)((System.Windows.Input.MouseButtonEventArgs)eventArgs).OriginalSource as Button;
if (btn != null)
{
}
}
}
来取消某些控件的焦点响应,从而事件的源也就不会是它;