可点击区域大于按钮 - XAML Windows Phone 8.1 Silverlight
Clickable area is bigger than the button - XAML Windows Phone 8.1 Silverlight
大家好,我这里有这个按钮:
如您所见,可点击区域比按钮大,作为拨号器,按钮区域跨越其他按钮区域。
如何使按钮和可点击区域相等?
抱歉英语不好。
非常感谢。
这是XAML:
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFA9E4F" Offset="0"/>
<GradientStop Color="#FFFE5D00" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Button x:Name="button1" Content="1" Margin="-12,267,306,0" Grid.Row="1" Click="button1_Click" Height="104" VerticalAlignment="Top" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button2" Content="2" Margin="148,267,145,0" Grid.Row="1" Click="button2_Click" Height="104" VerticalAlignment="Top" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button3" Content="3" Margin="307,267,-12,0" Grid.Row="1" Click="button3_Click" Height="104" VerticalAlignment="Top" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian" Padding="0" UseLayoutRounding="True" FlowDirection="LeftToRight"/>
<Button x:Name="button4" Content="4" Height="104" Margin="-12,344,306,0" Grid.Row="1" VerticalAlignment="Top" Click="button4_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button5" Content="5" Height="104" Margin="148,344,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button5_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button6" Content="6" Height="104" Margin="307,344,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="button6_Click" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button7" Content="7" Height="104" Margin="-12,421,306,0" Grid.Row="1" VerticalAlignment="Top" Click="button7_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button8" Content="8" Height="104" Margin="148,421,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button8_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button9" Content="9" Height="104" Margin="307,421,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="button9_Click" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button0" Content="0" Height="104" Margin="148,498,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button0_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonCanc" Content="#" Height="104" Margin="-12,498,306,0" Grid.Row="1" VerticalAlignment="Top" Click="buttonCanc_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonAst" Content="*" Height="104" Margin="307,498,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="buttonAst_Click" BorderThickness="3,3,0,3" FontSize="80" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonMakeCall" Content="" Height="110" Margin="-12,576,225,0" Grid.RowSpan="2" VerticalAlignment="Top" Click="buttonMakeCall_Click" BorderThickness="0,3" d:LayoutOverrides="LeftPosition, RightPosition" BorderBrush="#FFCFCFCF">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/call.png"/>
</Button.Background>
</Button>
<Button x:Name="buttonBackspace" Content="" HorizontalAlignment="Left" Height="110" Margin="228,576,-12,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="264" Click="buttonBackspace_Click" BorderThickness="0,3" BorderBrush="#FFCFCFCF" >
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/backspace.png"/>
</Button.Background>
</Button>
<Image x:Name="image" Height="80" Grid.RowSpan="2" VerticalAlignment="Top" Source="/Assets/BarraWind.png"/>
<Button x:Name="buttonCall" Padding="0" Content="" HorizontalAlignment="Left" Height="118" Margin="-12,662,0,-12" Grid.Row="1" VerticalAlignment="Top" Width="145" BorderThickness="0,5,0,0" BorderBrush="#FF003AFF">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/chiamamenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRubPers" Padding="0" Content="" Height="118" Margin="107,662,228,-12" Grid.Row="1" VerticalAlignment="Top" BorderThickness="0,5,0,0" Click="buttonRubPers_Click" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/rubricapersonalemenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRubAz" Padding="0" Content="" Height="118" Margin="228,662,107,-12" Grid.Row="1" VerticalAlignment="Top" Click="buttonRubAz_Click" BorderThickness="0,5,0,0" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/rubricaaziendalemenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRegCall" Padding="0" Content="" HorizontalAlignment="Right" Height="118" Margin="0,662,-13,-12" Grid.Row="1" VerticalAlignment="Top" Width="145" BorderThickness="0,5,0,0" Click="buttonRegCall_Click" Foreground="#FFFC670D" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/archiviochiamatemenu.jpg"/>
</Button.Background>
</Button>
<Border BorderThickness="0,3" HorizontalAlignment="Left" Height="202" Margin="0,80,0,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="480" Background="#FFFF5D00" BorderBrush="#FFCFCFCF"/>
<TextBlock x:Name="textBoxCal" Height="178" Margin="10,92,10,0" Grid.RowSpan="2" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Black" FontSize="48" FontFamily="Microsoft YaHei UI" TextAlignment="Center"/>
<Border x:Name="BorderToast" BorderBrush="#FF0120BA" BorderThickness="5" Margin="90,172,90,347" Grid.RowSpan="2" CornerRadius="10" Background="Gainsboro" d:LayoutOverrides="TopPosition, BottomPosition" Visibility="Collapsed"/>
<TextBlock x:Name="textBlock1" Height="92" Margin="103,183,103,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFF5D00" FontSize="34.667" TextAlignment="Center" FontFamily="Microsoft YaHei UI" Grid.RowSpan="2" Text="STO CHIAMANDO" FontWeight="Bold" Visibility="Collapsed"/>
<TextBlock x:Name="textToast" Height="64" Margin="97,277,97,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF0C00FF" FontSize="42.667" TextAlignment="Center" FontFamily="Microsoft YaHei UI" Grid.RowSpan="2" Text="3468787890" Visibility="Collapsed"/>
<Controls:ProgressRing x:Name="ProgRing" Margin="199,340,199,370" Grid.RowSpan="2" IsActive="True" Foreground="#FFFF5D00" Visibility="Collapsed"/>
</Grid>
不幸的是,您必须更改 Buttons
的整个模板。默认的有一个 Border
和
Margin="{StaticResource PhoneTouchTargetOverhang}"
这是每边 12 个像素。
阅读有关创建自定义样式(以及如何获取默认模板)的信息:http://www.geekchamp.com/tips/custom-styles-and-templates-in-windows-phone-button
大家好,我这里有这个按钮:
如您所见,可点击区域比按钮大,作为拨号器,按钮区域跨越其他按钮区域。 如何使按钮和可点击区域相等? 抱歉英语不好。 非常感谢。
这是XAML:
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFA9E4F" Offset="0"/>
<GradientStop Color="#FFFE5D00" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Button x:Name="button1" Content="1" Margin="-12,267,306,0" Grid.Row="1" Click="button1_Click" Height="104" VerticalAlignment="Top" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button2" Content="2" Margin="148,267,145,0" Grid.Row="1" Click="button2_Click" Height="104" VerticalAlignment="Top" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button3" Content="3" Margin="307,267,-12,0" Grid.Row="1" Click="button3_Click" Height="104" VerticalAlignment="Top" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian" Padding="0" UseLayoutRounding="True" FlowDirection="LeftToRight"/>
<Button x:Name="button4" Content="4" Height="104" Margin="-12,344,306,0" Grid.Row="1" VerticalAlignment="Top" Click="button4_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button5" Content="5" Height="104" Margin="148,344,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button5_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button6" Content="6" Height="104" Margin="307,344,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="button6_Click" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button7" Content="7" Height="104" Margin="-12,421,306,0" Grid.Row="1" VerticalAlignment="Top" Click="button7_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button8" Content="8" Height="104" Margin="148,421,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button8_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button9" Content="9" Height="104" Margin="307,421,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="button9_Click" BorderThickness="3,3,0,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="button0" Content="0" Height="104" Margin="148,498,145,0" Grid.Row="1" VerticalAlignment="Top" Click="button0_Click" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonCanc" Content="#" Height="104" Margin="-12,498,306,0" Grid.Row="1" VerticalAlignment="Top" Click="buttonCanc_Click" BorderThickness="0,3,3,3" FontSize="48" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonAst" Content="*" Height="104" Margin="307,498,-12,0" Grid.Row="1" VerticalAlignment="Top" Click="buttonAst_Click" BorderThickness="3,3,0,3" FontSize="80" BorderBrush="#FFCFCFCF" Foreground="White" FontFamily="DengXian"/>
<Button x:Name="buttonMakeCall" Content="" Height="110" Margin="-12,576,225,0" Grid.RowSpan="2" VerticalAlignment="Top" Click="buttonMakeCall_Click" BorderThickness="0,3" d:LayoutOverrides="LeftPosition, RightPosition" BorderBrush="#FFCFCFCF">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/call.png"/>
</Button.Background>
</Button>
<Button x:Name="buttonBackspace" Content="" HorizontalAlignment="Left" Height="110" Margin="228,576,-12,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="264" Click="buttonBackspace_Click" BorderThickness="0,3" BorderBrush="#FFCFCFCF" >
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/backspace.png"/>
</Button.Background>
</Button>
<Image x:Name="image" Height="80" Grid.RowSpan="2" VerticalAlignment="Top" Source="/Assets/BarraWind.png"/>
<Button x:Name="buttonCall" Padding="0" Content="" HorizontalAlignment="Left" Height="118" Margin="-12,662,0,-12" Grid.Row="1" VerticalAlignment="Top" Width="145" BorderThickness="0,5,0,0" BorderBrush="#FF003AFF">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/chiamamenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRubPers" Padding="0" Content="" Height="118" Margin="107,662,228,-12" Grid.Row="1" VerticalAlignment="Top" BorderThickness="0,5,0,0" Click="buttonRubPers_Click" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/rubricapersonalemenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRubAz" Padding="0" Content="" Height="118" Margin="228,662,107,-12" Grid.Row="1" VerticalAlignment="Top" Click="buttonRubAz_Click" BorderThickness="0,5,0,0" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/rubricaaziendalemenu.jpg"/>
</Button.Background>
</Button>
<Button x:Name="buttonRegCall" Padding="0" Content="" HorizontalAlignment="Right" Height="118" Margin="0,662,-13,-12" Grid.Row="1" VerticalAlignment="Top" Width="145" BorderThickness="0,5,0,0" Click="buttonRegCall_Click" Foreground="#FFFC670D" BorderBrush="#FFFC670D">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/archiviochiamatemenu.jpg"/>
</Button.Background>
</Button>
<Border BorderThickness="0,3" HorizontalAlignment="Left" Height="202" Margin="0,80,0,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="480" Background="#FFFF5D00" BorderBrush="#FFCFCFCF"/>
<TextBlock x:Name="textBoxCal" Height="178" Margin="10,92,10,0" Grid.RowSpan="2" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Black" FontSize="48" FontFamily="Microsoft YaHei UI" TextAlignment="Center"/>
<Border x:Name="BorderToast" BorderBrush="#FF0120BA" BorderThickness="5" Margin="90,172,90,347" Grid.RowSpan="2" CornerRadius="10" Background="Gainsboro" d:LayoutOverrides="TopPosition, BottomPosition" Visibility="Collapsed"/>
<TextBlock x:Name="textBlock1" Height="92" Margin="103,183,103,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFF5D00" FontSize="34.667" TextAlignment="Center" FontFamily="Microsoft YaHei UI" Grid.RowSpan="2" Text="STO CHIAMANDO" FontWeight="Bold" Visibility="Collapsed"/>
<TextBlock x:Name="textToast" Height="64" Margin="97,277,97,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF0C00FF" FontSize="42.667" TextAlignment="Center" FontFamily="Microsoft YaHei UI" Grid.RowSpan="2" Text="3468787890" Visibility="Collapsed"/>
<Controls:ProgressRing x:Name="ProgRing" Margin="199,340,199,370" Grid.RowSpan="2" IsActive="True" Foreground="#FFFF5D00" Visibility="Collapsed"/>
</Grid>
不幸的是,您必须更改 Buttons
的整个模板。默认的有一个 Border
和
Margin="{StaticResource PhoneTouchTargetOverhang}"
这是每边 12 个像素。
阅读有关创建自定义样式(以及如何获取默认模板)的信息:http://www.geekchamp.com/tips/custom-styles-and-templates-in-windows-phone-button