使用居中文本和動畫邊框創建按鈕內容

以下XAML代碼創建一個邊框作爲其內容的按鈕。邊框有一個TextBlock，因爲它是小孩。當你點擊按鈕時，邊框寬度逐漸增大。由於文本塊位於邊框內，因此只有單擊該按鈕才能看到該文本塊。
現在我的要求是：即使在點擊按鈕之前，按鈕上應該顯示一個文本。即使在單擊該按鈕後，只有邊框應該在按鈕文字保持在其中心位置時呈現動畫效果。使用居中文本和動畫邊框創建按鈕內容

<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left"> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.Click"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="myBorder" Storyboard.TargetProperty="Width" From="0" To="94" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Button.Triggers> 
<Button.Content> 
    <Border Background="Gray" Width="0" Name="myBorder"> 
     <TextBlock>Search</TextBlock> 
    </Border> 
</Button.Content> 
</Button>

如果有人能夠提供工作XAML代碼的答案，我將不勝感激。

來源

2011-10-09 Lucifer

我修改您的XAML只是稍微：

<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left"> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.Click"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Width" From="0" To="94" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Button.Triggers> 
    <Button.Content> 
     <Grid> 
      <Rectangle x:Name="myRectangle" Fill="Gray" Width="0" HorizontalAlignment="Left" /> 
      <TextBlock Text="Search" /> 
     </Grid> 
    </Button.Content> 
</Button>

對於Button的內容，你可以使用一個Grid，其中包含您Border和TextBlock。由於沒有指定列或行，所以TextBlock和Border被繪製在彼此之上。在這種情況下，Border沒有內容，我更願意使用Rectangle，因爲它更輕。希望這可以幫助！

來源

2011-10-09 22:22:47

使用居中文本和動畫邊框創建按鈕內容

回答

相關問題