WPF & C# - 토글버튼 / 리핏버튼 ( ToggleButton / RepeatButton )

WPF & C# - 이미지버튼 / 토글버튼 / 리핏버튼 ( ImageButton / ToggleButton / RepeatButton )

Toggle,RepeatButton.zip

MainWindow.xaml

<Button HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="146" Height="35">
    <Button.Template>
        <ControlTemplate>
            <Image Source="grid.jpg"></Image>
        </ControlTemplate>
    </Button.Template>
</Button>
 
<ToggleButton Name ="toggleOnOffButton" Checked ="toggleOnOffButton_Checked" Unchecked ="toggleOnOffButton_Unchecked" Width="100" Height="43" Margin="56,58,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="OFF"/>
 
<Grid Width="25" Height="100" Margin="10,58,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" >
    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <RepeatButton Grid.Row="0" Name ="repeatAddValueButton" Delay ="200" Interval ="1" Click ="repeatAddValueButton_Click" Content = "+"/>
    <Label Grid.Row="1" Name ="lblCurrentValue" Background ="LightGray" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10"/>
    <RepeatButton Grid.Row="2" Name ="repeatRemoveValueButton" Delay ="200" Interval ="1" Click ="repeatRemoveValueButton_Click" Content = "-"/>
</Grid>
 
<Grid Width="100" Height="25" Margin="56,133,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="25"/>
    </Grid.ColumnDefinitions>
    <RepeatButton Grid.Column="0"  Name ="repeatAddValueButton2" Delay ="200" Interval ="1" Click ="repeatAddValueButton2_Click" Content = "+"/>
    <Label Grid.Column="1" Name ="lblCurrentValue2" Background ="LightGray" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10"/>
    <RepeatButton Grid.Column="2" Name ="repeatRemoveValueButton2" Delay ="200" Interval ="1" Click ="repeatRemoveValueButton2_Click" Content = "-"/>
</Grid>

MainWindow.xaml.cs

protected void toggleOnOffButton_Checked(object sender, RoutedEventArgs e)
{
    toggleOnOffButton.Content = "On!";
}
protected void toggleOnOffButton_Unchecked(object sender, RoutedEventArgs e)
{
    toggleOnOffButton.Content = "Off!";
}
 
int currValue = 0;
protected void repeatAddValueButton_Click(object sender, RoutedEventArgs e)
{
    // Label에 1 더하기 
    currValue++;
    lblCurrentValue.Content = currValue;
}
protected void repeatRemoveValueButton_Click(object sender, RoutedEventArgs e)
{
    // Label에 1 빼기
    currValue--;
    lblCurrentValue.Content = currValue;
}
 
int currValue2 = 0;
protected void repeatAddValueButton2_Click(object sender, RoutedEventArgs e)
{
    // Labe2에 1 더하기 
    currValue2++;
    lblCurrentValue2.Content = currValue2;
}
protected void repeatRemoveValueButton2_Click(object sender, RoutedEventArgs e)
{
    // Labe2에 1 빼기
    currValue2--;
    lblCurrentValue2.Content = currValue2;
}

이미지 버튼을 위와 같이 템플릿으로 넣으면 Hover 로 인한 색상변화등이 생기지 않는다.

Hover 속성을 그대로 살린다면 background 로 넣거나, 버튼에 Grid를 추가하여 이미지를 넣으면 된다.

원문출처 : http://hoonsbara.tistory.com/91