web-dev-qa-db-ja.com

WPF角丸テキストボックス

私はWPFを知らず、今それを学んでいます。 WPFで丸い角TextBoxを探していました。そこで、Googleを検索してXAMLを見つけました：

 <!–Rounded Corner TextBoxes–>
<ControlTemplate x:Key=”RoundTxtBoxBaseControlTemplate” TargetType=”{x:Type Control}”>
<Border Background=”{TemplateBinding Background}” x:Name=”Bd” BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”6″>
<ScrollViewer x:Name=”PART_ContentHost”/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=”IsEnabled” Value=”False”>
<Setter Property=”Background” Value=”{DynamicResource {x:Static SystemColors.ControlBrushKey}}” TargetName=”Bd”/>
<Setter Property=”Foreground” Value=”{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}”/>
</Trigger>
<Trigger Property=”Width” Value=”Auto”>
<Setter Property=”MinWidth” Value=”100″/>
</Trigger>
<Trigger Property=”Height” Value=”Auto”>
<Setter Property=”MinHeight” Value=”20″/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

このXAMLを貼り付ける場所を教えてください。詳しく教えてください。私はWPFの初心者です。

wpftextboxrounded-corners
36
Thomas

WPFでは、コントロールのルックアンドフィールを変更または再作成できます。あなたの例が彼らがしたことなら、既存のControlTemplateのTextBoxを変更することでTextBoxの外観を変更したということです。そのため、コードの一部を見て探索するには、以下のコードを使用するだけです

<Window x:Class="WpfApplication4.Window1"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
        <Border Background="{TemplateBinding Background}" 
                x:Name="Bd" BorderBrush="Black"
                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"> 
            <ScrollViewer x:Name="PART_ContentHost"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="Width" Value="Auto">
                <Setter Property="MinWidth" Value="100"/>
            </Trigger>
            <Trigger Property="Height" Value="Auto">
                <Setter Property="MinHeight" Value="20"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5"></TextBox>
</Grid>

そのため、WindowのResourceセクションで静的リソースを宣言し、TemplateのTextBoxプロパティでResource TextBoxBaseControlTemplateをTemplate="{StaticResource TextBoxBaseControlTemplate}"として使用しました。

WPFコントロールをカスタマイズするためのテンプレートは、アイデアを得るためにこのドキュメントを参照するだけです

http://msdn.Microsoft.com/en-us/magazine/cc163497.aspx

58
Kishore Kumar

@Smollaは、@ Daniel Casserlyの答えに対するコメントで、はるかに良い答えがありました。

<TextBox Text="TextBox with CornerRadius">
  <TextBox.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3"/>
    </Style>
  </TextBox.Resources>
</TextBox>

TextBoxとListBoxのすべての境界線の角を丸くしたい場合は、スタイルをWindowまたはAppの<Resources>。

40
cheeesus

次のスタイルを使用して、すべてのテキストボックスを変更して角を丸くすることができます。

<Style TargetType="{x:Type TextBox}">
  <Style.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3" />
    </Style>
  </Style.Resources>
</Style>

次の回答に触発されました： https://stackoverflow.com/a/13858357/338745

11
Class Skeleton

この質問はmsdnでよく議論されています： http://social.msdn.Microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

そこにあるソリューションを試してみてください。それらは非常に詳細であり、コードを配置する場所を知るのに十分な詳細です。

4
Daniel Casserly

BorderThicknessofテキストボックスをゼロに設定するだけで、テキストボックスの周囲に境界線が追加されます。

 <Border BorderThickness="1" BorderBrush="Black" CornerRadius="10" Padding="2"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBox Text="Hello ! " BorderThickness="0"/>
 </Border>

出力は画像のとおりです！ Output!

3
Thunder

TextBox境界線の半径を設定するために添付プロパティを使用できます（ボタンに対しても同様に機能します）。

添付プロパティのクラスを作成

public class CornerRadiusSetter
{
    public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);

    public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);

    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
            typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));

    public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
    {
        Control control = sender as Control;

        if (control == null) return;

        control.Loaded -= Control_Loaded;
        control.Loaded += Control_Loaded;
    }

    private static void Control_Loaded(object sender, EventArgs e)
    {
        Control control = sender as Control;

        if (control == null || control.Template == null) return;

        control.ApplyTemplate();

        Border border = control.Template.FindName("border", control) as Border;

        if (border == null) return;

        border.CornerRadius = GetCornerRadius(control);
    }
}

次に、添付プロパティ構文を使用して、スタイルの重複なしに複数のテキストボックスをスタイルできます。

<TextBox local:CornerRadiusSetter.CornerRadius="10" />
<TextBox local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5" />
<TextBox local:CornerRadiusSetter.CornerRadius="10, 4, 18, 7" />
2
Vadim Ovchinnikov