0

ImageとTextBlockを含むボタンのテンプレートを作成しました。両方の外観を変更したいので、テンプレートに含める必要があると思います。ただし、もちろん、このテンプレートのすべてのインスタンスが同じテキストと画像を表示する必要はありません。

これまで、「Text」/「Source」で「カスタムパス式を使用する」という有望なプロパティを見つけました。TextBlock/Imageの値は次の場所にあります。

Data Binding... > Element Property > Use a custom path expression

ボタンのインスタンスでこの値を設定したいと思います。ボタンのXAMLに手動でを挿入しようとしmyText="Lorem Ipsum"ましたが、うまくいかないようです。

よろしくお願いします！

更新：これは、XAMLがどのように見えるかです： 

<TextBlock [...] Text="{Binding myText, ElementName={x:Null}, FallbackValue=Lorem}"/>

アクセスできるように、これにアクセスまたは変更するにはどうすればよいですか？

更新2： TextBlockとImageのバインディングはすでに存在します。現時点では、ボタンのXAMLは次のようになっています。

<s:SurfaceButton Command="{Binding SearchCustomCommand}" Style="{DynamicResource BasicButton}">
    <StackPanel Orientation="Vertical" Height="60" Width="48" IsHitTestVisible="False">
        <Image Source="{StaticResource ImageSourceToolboxSearchIcon}" 
            [...]
            Stretch="Uniform" />
        <TextBlock Text="{lex:LocText ToolboxButtonSearchesCustom}" 
            FontFamily="{DynamicResource button.font}" 
            [...]
            FontSize="{DynamicResource button.size}" 
            Foreground="{DynamicResource button.color.default}"/>
    </StackPanel>
</s:SurfaceButton>

ここで、画像とテキストボックスをテンプレート（これもすでに存在します）に抽出したいので、このようにボタンを参照できます（テンプレート内のサイズや色などに関するすべての情報と、ボタンの実際のインスタンスのリソース-echtボタンの画像/テキストを個別に変更できるようにするため）：

<s:SurfaceButton
    Command="{Binding SearchPopularCommand}"
    Style="{DynamicResource ToolboxButtonBig}"
    ImageSource="{StaticResource ImageSourceToolboxSearchIcon}"
    TextBlockSource="{lex:LocText ToolboxButtonSearchesCustom}"/>

StackPanelのXAML全体と、含まれているTextBlockとImageをテンプレートにコピーしました。これで、これらはすべてのボタンに表示されます（これは問題ありません）が、内容を変更することはできません。

説明がかなり貧弱な場合は申し訳ありません-私はWPFにかなり慣れていません...

更新3：さらに調査した結果、私のような質問が見つかりました。これは明らかに、私ができるよりも問題をよりよく説明しています。

4

2 に答える 2

1

画像やテキストを挿入するためにボタンのテンプレートを編集する必要はありません。次のようにButton.Contentプロパティを設定できます。

<Button>
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="../Images/image.png"/>
                <TextBlock Text="Lorem Ipsum"/>
            </StackPanel>
        </Button.Content>
    </Button>

そしてそれはうまくいくでしょう。上記の例は簡略化できますが、何が起こっているのかをよりよく理解するために、このように挿入しました。

編集：これは、2つの異なる方法でそれを行う方法の例です：テンプレートの上書き：

<Button Content="Lorem Ipsum">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <StackPanel Orientation="Horizontal">
                    <Image x:Name="ButtonImage" Source="../Images/mouseNotOverImage.png"/>
                    <ContentPresenter Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True" />
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="ButtonImage" Property="Source" Value="../Images/mouseOverImage.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

ここで スタイルを変更する完全なボタンテンプレート定義を見つけることができます：

<Button>
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="../Images/mouseOverImage.png"/>
                                    <TextBlock Text="Lorem Ipsum"/>
                                </StackPanel>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Content">
                            <Setter.Value>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="../Images/mouseNotOverImage.png"/>
                                    <TextBlock Text="Lorem Ipsum"/>
                                </StackPanel>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
于 2012-04-30T14:12:58.043 に答える
0

最初のオプションは、1つまたは複数のスタイルを定義することです。

<Window.Resources>
    <Style x:Key="MyButton" TargetType="{x:Type Button}" >
        <Setter Property="Content">
            <Setter.Value>
                <Grid>
                    <Image .../>
                    <TextBlock Text="Test"/>
                </Grid>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <Button Style="{StaticResource MyButton}" />
</Grid>

2番目のオプションは、Blendを使用してデフォルトのボタンスタイルのコピーを作成し、それを編集することです。

<Window.Resources>
    <Style x:Key="MyButton" TargetType="{x:Type Button}" >
        <Setter Property="Content">
            <Setter.Value>
                <Grid>
                    <TextBlock Text="Test"/>
                </Grid>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ButtonFocusVisual">
        <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>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <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}">
                    <Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">


                        <!-- put your text and image here -->

                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                    </Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="Button" HorizontalAlignment="Left" Margin="167,151,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource MyButtonStyle}"/>
</Grid>

3番目のオプションは、デフォルトのボタンスタイルに基づいてカスタムコントロールを作成することです。次に、依存関係プロパティを作成し、テンプレートバインディングを使用できます。

于 2012-05-02T17:09:11.267 に答える