จะทำปุ่มให้ดูเหมือน LinkButton ได้ยังไง แต่ไม่อยากใช้ Hyperlink ... !!
ข้อเสนอแนะใด ๆ
จะทำปุ่มให้ดูเหมือน LinkButton ได้ยังไง แต่ไม่อยากใช้ Hyperlink ... !!
ข้อเสนอแนะใด ๆ
คำตอบ:
หากคุณไม่ต้องการรูปแบบปุ่มปกติใด ๆ และต้องการเพียงบางสิ่งที่ดูเหมือนไฮเปอร์ลิงก์คุณสามารถเริ่มต้นด้วยสิ่งนี้
<Button Margin="5" Content="Test" Cursor="Hand">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
นี่คือลักษณะเดียวกับ:
<Style
x:Key="LinkButton"
TargetType="Button">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Button">
<TextBlock
TextDecorations="Underline">
<ContentPresenter /></TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter
Property="Foreground"
Value="Blue" />
<Style.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
และคุณสามารถใช้งานได้ดังนี้:
<Button Style="{StaticResource LinkButton}" Content="Clicky" />
<Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="Gray" /> </Trigger>
เพื่อจัดการสถานะ IsEnabled
<Style x:Key="LinkButton"
TargetType="Button"
BasedOn="{StaticResource ResourceKey={x:Type Button}}"
>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
>
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextDecorations" Value="Underline" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
เวอร์ชันของ MichaC และ Anderson วางขีดเส้นใต้ผิดเล็กน้อยนี่คือเวอร์ชันอัปเดตที่จะเพิ่มขีดเส้นใต้ให้กับสิ่งTextBlock
ที่อยู่ภายในไฟล์ContentPresenter
.
นี่คือคำแนะนำของ MichaC Style
ที่คุณสามารถใช้ซ้ำได้บนปุ่มใดก็ได้:
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
วิธีที่ง่ายที่สุด (ฉันทำสิ่งนี้ในแอปพลิเคชันของฉัน):
<TextBlock Name="..."
Text="..."
Cursor="Hand"
Foreground="Blue"
TextDecorations="Underline"
MouseLeftButtonUp=..."
/>
คุณสามารถควบคุม TextDecoration ได้อย่างเต็มที่เช่นเปลี่ยนรูปแบบปากกาหรือออฟเซ็ต ดูที่ลิงค์นี้เพื่อหาข้อมูลเพิ่มเติม: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx
ทางออกก็ใช้เป็นที่จะใส่ในภายในHyperlink
TextBlock
<TextBlock>
<Hyperlink Click="...">
<TextBlock Text="Link text" />
</Hyperlink>
</TextBlock>