0

私はこれに慣れていないので、ご容赦ください。

私は今これを持っていますStyle。これをウィンドウに貼り付けて、動作を確認します。

<Window.Resources>

<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="55" />
                    </Grid.ColumnDefinitions>

                    <Border x:Name="TheBorder"
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue"/>

                    <Rectangle Name="TheRectangle"
                                Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                        <Rectangle.BitmapEffect>
                            <DropShadowBitmapEffect ShadowDepth="5" />
                        </Rectangle.BitmapEffect>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Center"
                                       Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                                Value="True">
                        <Setter TargetName="TheBorder"
                                Property="BitmapEffect">
                            <Setter.Value>
                                <DropShadowBitmapEffect ShadowDepth="0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="White"/>
    <Setter Property="FontFamily"
            Value="Segoe UI" />
    <Setter Property="FontSize"
            Value="20" />

    </Style>


<Grid.RowDefinitions>
    <RowDefinition Height="20"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="20"/>
    <ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>

<Button Grid.Row="1"
        Grid.Column="1"
        Style="{StaticResource SelectionButton3}"
        Margin="0,0,0,5"
        Click="Button_Click">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Image Height="35"
               Width="35"
               Stretch="Fill"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Grid.Column="0"
               Margin="32.5,0,0,0"
               Source="/app;component/Media/Images/Mail/email.png" />

        <TextBlock Text="Email"
                   Grid.Column="1"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Margin="22,0,0,0"/>

    </Grid>


</Button>

2 つの質問があります。

1) テキストの一部しか表示されないのはなぜですか?

Image2) andを入れて、それらにバインドするにTextBlockはどうすればよいですか?Template

4

1 に答える 1

2

Text がクリップされる理由は、 Grid.Row と Grid.Column を指定しなかったためですContentPresenter。これにより、ボタンのコンテンツが の 0 番目の行と 0 番目の列にデフォルト設定され、ControlTemplateマージンと位置と組み合わせて、ボタン要素のテキストブロックが切り取られます。これがあなたの意図かもしれないと思いますか？

<ContentPresenter x:Name="ContentArea"
   Grid.Column="0"
   Grid.ColumnSpan="2"
   Grid.Row="0"
   VerticalAlignment="Stretch"
   HorizontalAlignment="Stretch"
   Content="{Binding Path=Content, 
             RelativeSource={RelativeSourceTemplatedParent}}" />

これで、は の Grid のContentPresenter両方の列にまたがるControlTemplateため、Textblock 自体を表示するスペースが増えます。

2 番目の質問に答えるにはHow do I put the Image and Textblock in the template and just bind to them?

これを行う 1 つの方法は、クラスをサブクラス化し、たとえばButtonそれを呼び出し、この新しいクラスでとという 2 つの新しい依存関係プロパティを実装することです。次に、andをコントロール テンプレートに移動し、それらを新しいandプロパティにバインドできます。その後、新しいプロパティをインスタンス化して使用し、ボタンの画像とテキストを設定できます。MyImageButtonImageText<Image><TextBlock>ImageTextMyImageButton

于 2012-04-10T23:01:05.980 に答える