আপনি ডাব্লুপিএফ-এর একটি বাটন মাউসওভারের জন্য পটভূমি কীভাবে পরিবর্তন করবেন?

Question

এই এক্সএএমএল সহ আমার পৃষ্ঠায় একটি বোতাম রয়েছে:

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" 
    Width="50" Height="50" HorizontalContentAlignment="Left" 
    BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

তবে আমি যখন আমার বোতামের উপর মাউস রাখি তখন বোতামটির পটভূমি ডিফল্ট উইন্ডো ধূসর ব্যাকগ্রাউন্ডে পরিবর্তিত হয়।
সমস্যা কি?

এটি মাউসওভারের আগে এবং পরে বোতামের চিত্র:
আগে:

পরে:

Comments

তবে আপনাকে চিত্রটি শুরু Forward-48.pngকরতে হবে এবং এটির জন্য এটি পরিবর্তন করতে ইসমাউসওভারকে ট্রিগার করতে হবে Forward-48.png। আমি আপনার কোডটি বিভিন্ন চিত্র সহ ব্যবহার করার চেষ্টা করছি এবং আমি সবাই ভাল কাজ করেছি।

— আনাতোলি নিকোলাভ

@ অ্যানটোলি: এটি কার্যকর হয় না।

— মোহাম্মদী

আপনার ডিফল্ট রঙ পরে? অন্য কোথাও আপনি পরিবর্তন করবেন না / বোতামের পটভূমি সেট করবেন না? আমি আপনার কোড ভাল কাজ করে।

— আনাতোলি নিকোলাভ

Answer 1

ডিফল্ট MouseOverআচরণটি অপসারণ করতে Buttonআপনাকে পরিবর্তন করতে হবে ControlTemplate। আপনার Styleসংজ্ঞাটি নিম্নলিখিতটিতে পরিবর্তন করা উচিত কৌশলটি:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

সম্পাদনা: এটি কয়েক বছর দেরি হয়ে গেছে, তবে আপনি আসলে সেখানে অবস্থিত সীমান্তের ভিতরে সীমানা ব্রাশটি সেট করতে সক্ষম হন। ইড্ক যদি এটি চিহ্নিত করা হয় তবে এটি মনে হয় না ...

Comments

এটি কাজ করে, তবে বোতামস বর্ডারগুলি অদৃশ্য হয়ে যাবে! বোতামটির চারপাশে একটি <বর্ডার বর্ডার ব্রাশ = "ডার্কগ্রি" বর্ডারটিকনেস = "1"> উপাদান রাখতে হয়েছিল।

— ভেনুগোপাল এম

@ সিএফ এর কারণ হ'ল স্ট্যান্ডার্ড বোতাম শৈলীতে ভিতরে ট্রিগার রয়েছে ControlTemplate, তাই তারা ওপির ট্রিগারগুলিকে ওভাররাইড Styleকরে।

— টরভিন

@torvin যে এত পিছনে মনে হয়! কোনও ব্যবহারকারী-সংজ্ঞায়িত ট্রিগারটিকে ডিফল্টরূপে ওভাররাইড করা উচিত কেন? আমি শ্রেণিবিন্যাস বুঝতে পারি, কন্ট্রোলটেম্পলেটটি স্টাইলের aboveর্ধ্বে, তবে কেন এটির মতো বেসিক সেটিংসকে ওভাররাইড করা কেন এত কঠিন হতে হয় তা আমি বুঝতে পারি না।

— ফুয়েলাইট

@ ফুয়েলাইট, ControlTemplateমূলত ভিতরে ট্রিগারটি বলেছে ' Backgroundরঙের সাথে সামঞ্জস্য করে পেন্টার বর্ডার । এবং যদি মাউস বোতামের ওপরে থাকে - তবে পরিবর্তে এই রঙটি এই রঙটি রঙ করুন ', শৈলীতে আপনি কেবল রঙটিতে অ্যাক্সেস করতে পারবেন Background, এবং অন্তর্নিহিত সীমানার রঙে নয়। আমি আপনাকে দেখছি যদিও, ডাব্লুপিএফ স্টাইলিং পছন্দসই হওয়ার জন্য অনেক কিছু ছেড়ে যায় ...

— টরভিন

স্বচ্ছ পটভূমি সহ কোনও চিত্র ব্যবহার করার সময় রোলওভারে প্রদর্শিত নীল বাক্সটি সরিয়ে ফেলার এতে অতিরিক্ত সুবিধা রয়েছে। আমার ক্ষেত্রে আমি সীমানাটি চাইনি, সুতরাং বর্ডারথিকনেসকে 0 এ সেট করুন

— চক সেভেজ

Answer 2

এখনও অবধি সমস্ত উত্তর সম্পূর্ণরূপে অন্য কিছু দিয়ে ডিফল্ট বোতামের আচরণটি প্রতিস্থাপনের সাথে জড়িত। তবে, আইএএমএইচও এটি XML উপাদানটির বিদ্যমান, ডিফল্ট টেম্পলেটটি সম্পাদনা করে আপনার যত্ন নেওয়া কেবলমাত্র অংশটি পরিবর্তন করা সম্ভব তা বোঝা গুরুত্বপূর্ণ এবং গুরুত্বপূর্ণ ।

ডাব্লুপিএফ বোতামে হোভার ইফেক্টের সাথে মোকাবিলা করার ক্ষেত্রে, ডাব্লুপিএফ Buttonউপাদানটিতে উপস্থিতি পরিবর্তনের কারণে Triggerডিফল্ট শৈলীর একটি হয় Buttonযা IsMouseOverসম্পত্তি ভিত্তিতে তৈরি হয় Backgroundএবং BorderBrushশীর্ষ স্তরের Borderউপাদানটির বৈশিষ্ট্য এবং বৈশিষ্ট্য নির্ধারণ করে নিয়ন্ত্রণ টেমপ্লেটে। Buttonউপাদান পটভূমিতে নীচে Borderযাতে পরিবর্তন উপাদান পটভূমিতে Button.Backgroundসম্পত্তি দেখা হচ্ছে থেকে হোভার ইফেক্ট বাধা দেয় না।

কিছু প্রচেষ্টা সহ, আপনি নিজের সেটারের সাথে এই আচরণটি ওভাররাইড করতে পারেন, তবে যে উপাদানটি আপনাকে প্রভাবিত করতে হবে সেটি হ'ল টেমপ্লেটে রয়েছে এবং আপনার নিজের এক্সএএমএল-তে সরাসরি অ্যাক্সেসযোগ্য নয়, এই পদ্ধতিটি কঠিন এবং আইএমএইচও অতিরিক্ত জটিল।

আরেকটি বিকল্প হিসাবে গ্রাফিক ব্যবহার করতে হবে Contentজন্য Buttonবদলে Background। আপনার যদি গ্রাফিকের উপরে অতিরিক্ত সামগ্রীর প্রয়োজন হয় তবে আপনি এগুলিকে Gridসামগ্রীতে শীর্ষ স্তরের একটি বিষয় হিসাবে একত্রিত করতে পারেন ।

তবে, আপনি যদি আক্ষরিকভাবে কেবল হোভার ইফেক্টটি পুরোপুরি অক্ষম করতে চান (কেবল এটি লুকিয়ে রাখার চেয়ে), আপনি ভিজ্যুয়াল স্টুডিও এক্সএএমএল ডিজাইনার ব্যবহার করতে পারেন:

1. আপনার এক্সএএমএল সম্পাদনা করার সময়, "ডিজাইন" ট্যাবটি নির্বাচন করুন ।
2. ইন "ডিজাইন" ট্যাব, বোতাম যার জন্য আপনি প্রভাব নিষ্ক্রিয় করতে চান এটি।
3. সেই বোতামটিতে ডান ক্লিক করুন এবং "টেম্পলেট সম্পাদনা করুন / একটি অনুলিপি সম্পাদনা করুন ..." নির্বাচন করুন । নতুন টেম্পলেট সংস্থানটি আপনি কোথায় স্থাপন করতে চান সেই প্রম্পটে আপনি নির্বাচন করুন Select এটি কিছুই করার জন্য প্রদর্শিত হবে না, তবে প্রকৃতপক্ষে ডিজাইনার যেখানে আপনি এটি বলেছেন সেখানে নতুন সংস্থান যুক্ত করবে এবং সেই সমস্ত সংস্থানগুলিকে বোতাম টেমপ্লেট হিসাবে ব্যবহার করে এমন স্টাইলের উল্লেখ করতে আপনার বোতামের উপাদানটি পরিবর্তন করেছে।
4. এখন, আপনি যে স্টাইল সম্পাদনা করতে পারেন। সবচেয়ে সহজ জিনিসটি উপাদানটি মুছতে বা মন্তব্য-আউট করা (যেমন, Ctrl+ E, C) <Trigger Property="IsMouseOver" Value="true">...</Trigger>। অবশ্যই, আপনি সেই সময়ে যে টেম্পলেটটি চান তা পরিবর্তন করতে পারেন।

আপনার কাজ শেষ হয়ে গেলে, বোতামের স্টাইলটি দেখতে এরকম কিছু দেখবে:

<p:Style x:Key="FocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <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">
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <!--<Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>-->
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>

(দ্রষ্টব্য: আপনি p:প্রকৃত কোডে এক্সএমএল নেমস্পেসের যোগ্যতাগুলি বাদ দিতে পারেন … আমি কেবল এখানে এগুলি সরবরাহ করি কারণ স্ট্যাক ওভারফ্লো এক্সএমএল কোড ফর্ম্যাটরগুলি <Style/>এমন উপাদানগুলির দ্বারা বিভ্রান্ত হয়ে পড়ে যেগুলির এক্সএমএল নেমস্পেসের সাথে সম্পূর্ণ-যোগ্যতাসম্পন্ন নাম নেই name)

আপনি যদি অন্য বোতামগুলিতে একই শৈলীটি প্রয়োগ করতে চান তবে আপনি কেবল তাদের ডান ক্লিক করতে পারেন এবং "টেম্পলেট সম্পাদনা করুন / সংস্থানগুলি প্রয়োগ করুন" নির্বাচন করতে পারেন এবং প্রথম বোতামটির জন্য আপনি যে শৈলীটি যুক্ত করেছেন তা নির্বাচন করতে পারেন। এক্সএএমএল-এর উপাদানগুলিতে ডিফল্ট শৈলী প্রয়োগ করার জন্য সাধারণ কৌশলগুলি ব্যবহার করে আপনি এমনকি সমস্ত বোতামের জন্য এই স্টাইলটিকে ডিফল্ট স্টাইল তৈরি করতে পারেন।

Comments

অনেক ধন্যবাদ. এখানে একমাত্র সহ্যযোগ্য উত্তর

— জারেড বিচ

Answer 3

এটি আমার পক্ষে ভাল কাজ করেছে।

বাটন স্টাইল

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="DarkGoldenrod"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Grid Background="Transparent">
                        <ContentPresenter></ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

বাটন

<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"
        Command="{Binding CloseWindow}">
    <Button.Content >
        <Grid Margin="0 0 0 0">
            <Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" />
        </Grid>
    </Button.Content>
</Button>

মন্তব্য

• বোতামটি কিছুটা নীল ক্রস প্রদর্শন করে, অনেকটা উইন্ডোটি বন্ধ করার মতো।
• গ্রিডটির ব্যাকগ্রাউন্ডটিকে "স্বচ্ছ" হিসাবে সেট করে এটি একটি হিটস্টেস্ট যুক্ত করে, যার অর্থ মাউস বোতামের যে কোনও জায়গায় থাকলে তা কার্যকর হবে। এই ট্যাগটি ছাড়ুন এবং আইকনের কোনও ভেক্টর লাইনের উপরে মাউস থাকলে এটি বাটনটি হালকা হবে (এটি খুব ব্যবহারযোগ্য নয়)।

Comments

এটি একটি দুর্দান্ত উত্তর, তবে পাশাপাশি কেবল হোভারিংয়ের ক্ষেত্রে Strokeরঙ পরিবর্তন সম্পর্কে কী ? BorderPath

— নাটিউস

এই x:Key="TransparentStyle"অংশটি এবং ব্যবহারটি আমার সেখানে পৌঁছানোর জন্য গুরুত্বপূর্ণ ছিল ... ধন্যবাদ!

— 13

Answer 4

আমি যে রিসোর্সড অভিধানটি ব্যবহার করছি তা থেকে কেবল আমার বোতামের স্টাইলটি ভাগ করতে চাই। আপনি স্টাইল ট্রিগারগুলিতে অবাধে অন হওয়ার পটভূমি পরিবর্তন করতে পারেন। " ColorAnimation To = * আপনার কাঙ্ক্ষিত বিজি (যেমন # এফএফসিইসিএফ 7 এ0)" " মাউস ওভারের পরে বোতাম বিজিও স্বয়ংক্রিয়ভাবে তার আসল বিজিতে ফিরে আসবে You আপনি কীভাবে দ্রুত রূপান্তরটি সেট করতে পারেন।

সংস্থান অভিধান

<Style x:Key="Flat_Button" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="50"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontFamily" Value="Arial Narrow"/>
    <Setter Property="FontSize" Value="12px"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground">
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="White"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" >
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="#28C2FF" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Border x:Name="border"
                         SnapsToDevicePixels="True"
                         BorderThickness="1"
                         Padding="4,2"
                         BorderBrush="Gray"
                         CornerRadius="3"
                         Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True" />

                    </Grid>
                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#D2F898"
                                        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                        FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                                            Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                            FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>

        </Trigger>


    </Style.Triggers>
</Style>

আপনাকে যা করতে হবে তা হ'ল স্টাইলকে কল করা।

উদাহরণ বাস্তবায়ন

<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto">  
     <StackPanel>
     <TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/>
     </StackPanel>
</Button>

Answer 5

একটি সামান্য আরও কঠিন উত্তর যা কন্ট্রোলটেম্পলেট ব্যবহার করে এবং একটি অ্যানিমেশনের প্রভাব রয়েছে ( https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing- নিয়ন্ত্রণ )

আপনার সংস্থান অভিধানে এটির মতো আপনার বোতামের জন্য একটি নিয়ন্ত্রণ টেমপ্লেট সংজ্ঞায়িত করুন:

<ControlTemplate TargetType="Button" x:Key="testButtonTemplate2">
    <Border Name="RootElement">
        <Border.Background>
            <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
        </Border.Background>

        <Grid Margin="4" >
            <Grid.Background>
                <SolidColorBrush x:Name="ButtonBackground" Color="Aquamarine"/>
            </Grid.Background>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

আপনার এক্সএএমএল-তে আপনি নীচের মতো আপনার বোতামের জন্য উপরে টেম্পলেটটি ব্যবহার করতে পারেন:

আপনার বোতামটি সংজ্ঞায়িত করুন

<Button Template="{StaticResource testButtonTemplate2}" 
HorizontalAlignment="Center" VerticalAlignment="Center" 
Foreground="White">My button</Button>

আশা করি এটা সাহায্য করবে

Answer 6

পরিবর্তন বোতাম শৈলীর জন্য

1 ম: সংস্থান শৈলীর সংজ্ঞা দিন

<Window.Resources>

    <Style x:Key="OvergroundIn" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FF16832F">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FF06731F">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>

    <Style x:Key="OvergroundOut" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FFF35E5E">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FFE34E4E">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>


</Window.Resources>

2 য় বাটন কোড সংজ্ঞায়িত

                           <Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="2" CornerRadius="3" Margin="2,2,2,2"  >
                                <Button Name="btnFichar" BorderThickness="0" Click="BtnFichar_Click">
                                    <Button.Content>
                                        <Grid>
                                            <TextBlock Margin="0,7,0,7" TextAlignment="Center">Fichar</TextBlock> 
                                        </Grid>
                                    </Button.Content>
                                </Button>
                            </Border>

পিছনে 3 র্থ কোড

    public void ShowStatus()
    {
        switch (((MainDto)this.DataContext).State)
        {
            case State.IN:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(243, 94, 94));
                this.btnFichar.Style = Resources["OvergroundIn"] as Style;
                this.btnFichar.Content = "Fichar Salida";
                break;

            case State.OUT:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(76, 106, 83));
                this.btnFichar.Style = Resources["OvergroundOut"] as Style;
                this.btnFichar.Content = "Fichar Entrada";
                break;

        }
    }