Convert ListBox template into Button Template - wpf

Question

I having hard time converting an ItemTemaplte of ListBox to a Button from the example {Surfin}Video
Viewer Demo ,
I want a button style like an Item in this ListBox . Each Item in the ListBox have
Name&Image with the style define there. I noob to Template & Styles , If some1 with more expreince can
make it easily, I appreciate . ( better to run the demo to see how the 'button'( listbox item) looks like , I need the look and feel of the button only :) ignore the 'video' )
Thanks.
<Window x:Class="Surfin.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Surfin"
Background="Black" x:Name="mainWindow"
MinWidth="650" MinHeight="365" Width="650" Height="365">
<!-- Declare the MyVideos class, which belongs to the DataTemplatingLab namespace.-->
<!-- Setting the Directory to the relative path pointing to the Media folder.-->
<!-- Giving this an x:Key. Now controls in this Window can bind to the videos in the Media folder.-->
<Window.Resources>
<MyVideos xmlns="clr-namespace:DataTemplatingLab" Directory="Media" x:Key="vids" />
<DataTemplate x:Key="mainScreenTemplate">
<Border BorderBrush="LimeGreen" BorderThickness="2"
CornerRadius="3" Margin="15">
<Grid>
<!-- Background image if no video is playing. -->
<Image Source="Images\Crystal.jpg" Stretch="Fill"/>
<!-- The video -->
<!-- The Source property of the video is bound to the Source property of the current MyVideo object.-->
<MediaElement Name="mainVideo" Stretch="Fill"
Source="{Binding Path=Source}"/>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="listBoxTemplate">
<DataTemplate.Resources>
<Style TargetType="DockPanel">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="ToolTipService.ShowDuration" Value="80000"/>
</Style>
</DataTemplate.Resources>
<DockPanel Height="70" Width="160">
<Border Margin="4,5,0,0" Height="50" Width="50">
<Image Source="Images\Preview.png" />
</Border>
<TextBlock Text="{Binding Path=VideoTitle}" VerticalAlignment="Center"
TextBlock.TextTrimming="WordEllipsis" Margin="5,5,0,5"
Foreground="White" FontSize="12" FontFamily="Comic Sans MS">
</TextBlock>
</DockPanel>
</DataTemplate>
<Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
<Setter Property="Margin" Value="10,10,10,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle x:Name="GelBackground" RadiusX="9" RadiusY="9"
Opacity="1" Fill="{TemplateBinding Background}"
Stroke="#66ffffff" StrokeThickness="1" />
<Rectangle x:Name="GelShine" RadiusX="6" RadiusY="6"
Opacity="1" Margin="2,2,2,0" VerticalAlignment="top"
Stroke="transparent" Height="15">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ccffffff" Offset="0" />
<GradientStop Color="transparent" Offset="1" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="GelBackground"
TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<ColorAnimation To="LimeGreen" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="GelBackground"
TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="RoyalBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<!-- 1) The ListBox and ContentControl bind to the same source. -->
<!-- 2) IsSynchronizedWithCurrentItem set to true. -->
<!-- With the above 2 conditions satisfied, once the DataTemplates are in place,
the ContentControl will display the content of the selected list item.-->
<DockPanel>
<ListBox DockPanel.Dock="Left" Width="200" BorderThickness="0"
ItemsSource="{Binding Source={StaticResource vids}}"
IsSynchronizedWithCurrentItem="True"
ItemTemplate="{StaticResource listBoxTemplate}"
Background="Transparent"/>
<ContentControl Content="{Binding Source={StaticResource vids}}"
ContentTemplate="{StaticResource mainScreenTemplate}"/>
</DockPanel>
</Window>

Answer 1

<Style x:Key="{x:Type Button}" TargetType="Button">
<Setter Property="Margin" Value="10,10,10,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="GelBackground" RadiusX="9" RadiusY="9"
Opacity="1" Fill="{TemplateBinding Background}"
Stroke="#66ffffff" StrokeThickness="1" />
<Rectangle x:Name="GelShine" RadiusX="6" RadiusY="6"
Opacity="1" Margin="2,2,2,0" VerticalAlignment="top"
Stroke="transparent" Height="15">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ccffffff" Offset="0" />
<GradientStop Color="transparent" Offset="1" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="GelBackground"
TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<ColorAnimation To="LimeGreen" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="GelBackground"
TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="RoyalBlue" />
</Trigger>
</Style.Triggers>
</Style>
Something like this. Hope this helps.