SilverLightカスタムImageButton

21164 ワード

SilverLightのXAMLの書き方はWPFと同じですが、カスタムボタンにはWPFが来ないのがわかりました.以下、SilverLightのImageButtonを作るアイデアについてお話しします.
SilverLightでは、ButtonのContentプロパティを使用して複数の要素をロードできます.次に、stackPanelで画像とテキストを収容します.

       <Button x:Name="AddUserButton" Width="150" Margin="32,140,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <TextBlock Text="Add User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>
        <Button x:Name="EditUserButton" Width="150" Margin="32,82,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                <Image Source="Images/eqrth.png" Width="16" Height="16" />
                <TextBlock Text="Edit User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>
        <Button x:Name="DeleteUserButton" Width="150" Margin="32,26,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <TextBlock Text="Delete User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--  。-->
    
    <Style x:Key="AddButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DeleteButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="EditButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

<UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary1.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

次にApplyのスタイルを適用します.

    <Button HorizontalAlignment="Left" Margin="32,0,0,160"
         VerticalAlignment="Bottom" 
         Width="152" 
         Content=" "
         Style="{StaticResource AddButtonStyle}" Height="40" RenderTransformOrigin="-2,0.2"
         />

1.MySQLレプリケーションの実装

同期プロセス