WPF 方块按钮 仿照360

下面这种按钮就是我们要仿照的按钮样式

本次主要是将这些按钮排列成几行几列的形状，类似下图

一、方块按钮样式

<!--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>

二、列表样式采用ListBox

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)
                {
                   
                }
        }
 }

如果你想再进行多次试验试试到底哪种事件靠谱的话。不妨配合修改样式360ButtonBlock样式里面的控件IsHitTestVisible 属性。

来取消某些控件的焦点响应，从而事件的源也就不会是它；