Стиль WPF для кнопок

Question

Я не использовал WPF в течение очень долгого времени (около 4 лет). Но теперь начал использовать его снова для некоторого использования, вы можете увидеть, что один из моих самых популярных вопросов задан в WPF. Причина, по которой я упоминаю, заключается в том, что у меня есть некоторые знания о WPF и о том, как это работает. Мой последний проект привлекает BLEND для достижения очень хорошего интерфейса. Так вот у меня есть макет в Photoshop, и я пытаюсь получить этот дизайн макета,

И до сих пор у меня есть только это,

Так на самом деле был бы признателен, если кто-то может указать мне на следующее.

Как получить эффект свечения границы и кривые также как сгруппировать их в определенный стиль в отдельный файл и связать его с кнопками. Спасибо за ваше время и ответы

EDIT: С моим кодом стилей.

У меня есть следующий код стилей в Custom_Styles.xaml (словарь ресурсов) Как связать его с кнопкой?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:Keyboard_actual"> 

    <Style x:Key="Button" TargetType="Button"> 
     <Setter Property="Control.Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border> 
         <Rectangle Margin="2" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</ResourceDictionary> 

Answer 1

Для эффекта границы свечения, вы можете добавить Drop Shadow Effect с Shadow Depth 0 и желаемого цвета и границы кисти белого для Баттона.

Чтобы создать стиль в отдельном файле, необходимо создать словарь ресурсов, как это:

Проект ► Добавить новый элемент ... ► ресурсов Словарь

Тогда имя ваш файл. В этом примере я называю это Styles.xaml.

Теперь откройте свой app.xaml и поместить это в Application тег:

<Application.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="Styles.xaml"/> 
     </ResourceDictionary.MergedDictionaries> 
     <!--Put all previous resources in the App.xaml here--> 
    </ResourceDictionary> 
</Application.Resources> 

Теперь в файле Styles.xaml в ResourceDictionary тег, поместите стиль. Я тоже работаю над стилем. Как только я закончу это, я опубликую его.

Чтобы связать стиль, используйте:

<Button Style="{StaticResource Button}" .../> 

Он не может работать, так как ключ "Button". Если это не изменит его на что-то вроде «ButtonStyle».

И эффект Drop Shadow Effect делает довольно приличную работу.

Здесь не приводится пример (Увеличенный на 200%):

и стиль XAML:

<Style x:Key="ButtonStyle" TargetType="Button"> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <SolidColorBrush Color="#FF00C3BA"/> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0.8" CornerRadius="3"> 
        <Border.Effect> 
         <DropShadowEffect Color="#FF72FFE5" ShadowDepth="0"/> 
        </Border.Effect> 
        <TextBlock Foreground="{TemplateBinding BorderBrush}" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

используется так:

<Grid Background="#FF171717"> 
    <Button Content="Q" HorizontalAlignment="Left" Height="47" Margin="103,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
    <Button Content="Y" HorizontalAlignment="Left" Height="47" Margin="378,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
    <Button Content="T" HorizontalAlignment="Left" Height="47" Margin="323,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
    <Button Content="R" HorizontalAlignment="Left" Height="47" Margin="268,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
    <Button Content="E" HorizontalAlignment="Left" Height="47" Margin="213,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
    <Button Content="W" HorizontalAlignment="Left" Height="47" Margin="158,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/> 
</Grid>