1

質問が必ずしも意味をなさない場合は、事前にお詫び申し上げますが、プログラミングは初めてです。o_0

Blendでボタンとして機能するユーザー定義のXAMLコントロールを作成しました。

<Style x:Key="GeekMDCalc_Button_Std." TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Canvas x:Name="canvas" Width="200" Height="200" Background="#FFA09F9F">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.15"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF0CFF00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                            <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF0CFF00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="PointerFocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Height="57" Width="200" Canvas.Top="143"/>
                            <ContentPresenter Height="57" Canvas.Top="143" Width="190" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="Black" Canvas.Left="10"/>
                            <Image x:Name="image" Height="128" Canvas.Left="10" Canvas.Top="10" Width="180"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

次に、GridView内にボタンを個別に追加します。

<GridView Grid.ColumnSpan="2" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="2" VerticalAlignment="Top" FontFamily="Global User Interface">
        <Button Content="Emergency" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Intensive Care" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Internal Med." Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Surg/Trauma" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Renal" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Electrolytes" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Cardiology" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Pediatrics" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="Neurology" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="GI" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
        <Button Content="General" Style="{StaticResource GeekMDCalc_Button_Std.}" FontFamily="DilleniaUPC" FontSize="45.33" FontWeight="Light"/>
    </GridView>

作成したコントロールテンプレートの画像コンテナに画像をバインドして背景を適用しようとしていますが、うまくいきませんでした。これらの各ボタンに個別の背景を持たせたいのですが、これはコードビハインドで定義したいと思っていました。何時間も検索してみましたが、作成したボタンコントロールの画像ソースを簡単に変更する方法が見つからないようです。

あなたの助けと初心者の忍耐に感謝します^_^

4

1 に答える 1

0

あなたはそのスタイルのイメージを必要としません、私はそれを悪い習慣とも呼ぶでしょう。ボタンはであるContentPresenterため、その主な目的は「コンテンツを提示する」ことであり、Contentそれ自体は何でもかまいません。別のコントロール、画像、文字列、またはカスタムクラス。したがって、テンプレートにImageオブジェクトを追加しなくても、画像をボタンに直接割り当てることができます。ContentがWPFコントロールでない場合、WPFにはを表示する方法について少しガイダンスが必要Contentです。したがって、コンテンツをどのように表示するかを彼に伝える必要があります。これは、正確にはテンプレートを使用して行われますDataTemplate。アイコンだけが必要な場合は、これで十分です。

<Button>
   <Image Source="SomeIcon"/>
</Button>

コンテンツとしてさらに表示する必要がある場合は、DataTemplateを定義する必要があります。データバインディングを使用して、それを最大限に活用することをお勧めします。これは短い例です：

class MyButtonInfo
{
    public ImageSource Icon{get;set;}
    public string Caption{get;set;}
    public Command Command{get;set;}
}

<DataTemplate x:Key="MyTemplate">
    <StackPanel>
        <Image Source="{Binding Icon}"/>
        <TextBlock Text="{Binding Caption}"/>
    </StackPanel>
</DataTemplate>

<Button Content="{Binding ButtonInfo}" ContentTemplate="{StaticResource MyTemplate}" Command="{Binding Command}">
</Button>
于 2012-11-18T18:32:03.960 に答える