中心圓（圓）按鈕，在網格

我有一個圓（圓）按鈕，看起來像這樣：中心圓（圓）按鈕，在網格

它是由一個Ellipse這樣（簡化）的：

<Ellipse Stretch="Uniform"/>

按鈕的款式齊全：

<Style x:Key="StatusButton" TargetType="Button"> 
    <Setter Property="Background" Value="{StaticResource StatusButtonBackground}" /> 
    <Setter Property="Foreground" Value="{StaticResource StatusButtonForeground}" /> 
    <Setter Property="FontSize" Value="32" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/> 
        <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/> 
        <ContentPresenter HorizontalAlignment="Center" 
             VerticalAlignment="Center"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter TargetName="StatusButtonCircle" Property="Fill" Value="{StaticResource StatusButtonDisabledForeground}"/> 
         <Setter TargetName="StatusButtonCircleHighlight" Property="Stroke" Value="{StaticResource StatusButtonDisabledHighlight}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

用於電網：

<Button Style="{StaticResource StatusButton}" 
     Margin="50" Grid.Column="2" />

我該如何做到這一點，圓是在網格的中心？

試圖居中網格樣式

所以我改變了電網的風格是：

<Grid> 
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> 
     <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/> 
     <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/> 
    </Grid> 
    <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
</Grid>

現在看起來是這樣的：

來源

2017-08-09 el-nino

你能表現出更多的XAML如'StatusButton'風格？ –

我們需要看'樣式'，因爲如果你使用'StackPanel'，那麼它將佔用最少的空間。 – XAMlMAX

嘗試在容器內放置兩個「橢圓」，如另一個「網格」，並將「HorizontalAlignment」和「VerticalAlignment」設置爲「Center」 –

你可以嘗試添加這樣的邊距。

<Grid Margin="0,50,0,0"> 
    <Ellipse x:Name="StatusButtonCircle" Stroke="Black" StrokeThickness="0" Fill="{StaticResource StatusButtonBackground}" Stretch="Uniform"/> 
    <Ellipse x:Name="StatusButtonCircleHighlight" Margin="10" Stroke="{StaticResource StatusButtonHighlight}" StrokeThickness="5" Stretch="Uniform"/> 
</Grid>

，並修改上邊距按適當...

來源

2017-08-10 06:56:33

這樣做工作'<電網保證金=「25,0,0,0」>'，但它不感覺不錯。它被「手動」定位在中心。如果我改變按鈕「邊距=」50「的邊距，它不在中心了。 –

中心圓（圓）按鈕，在網格

回答

相關問題