XAML，在動畫中移動兩個contentcontrol內的按鈕

是否有可能移動一個按鈕內的兩個內容控件，並調整這個按鈕的大小？XAML，在動畫中移動兩個contentcontrol內的按鈕

<Button Height="100" Width="100"> 
    <Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition height="30"/> 
     <RowDefinition height="30"/> 
    </Grid.RowDefinitions> 
    <Image Grid.Row="0" Source="img.jpg"/> 
    <TextBlock Grid.Row="1" Text="Some content"/> 
    </Grid> 
</Button>

我想垂直對齊他們水平而不是在鼠標懸停和調整100按鈕50，這可能嗎？

來源

2017-07-30 Erica Swan

這可以用風格來實現：

<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="LightGray"/> 
    <Setter Property="BorderBrush" Value="Black"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Height" Value="100"/> 
    <Setter Property="Width" Value="100"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
        <UniformGrid x:Name="uGrid"> 
         <Image Source="img.jpg" /> 
         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </UniformGrid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="false"> 
         <Setter TargetName="uGrid" Property="Rows" Value="2" /> 
         <Setter TargetName="uGrid" Property="Columns" Value="1" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter TargetName="uGrid" Property="Columns" Value="2" /> 
         <Setter TargetName="uGrid" Property="Rows" Value="1" /> 
         <Setter Property="Height" Value="50" /> 
         <Setter Property="Width" Value="50" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

這種風格定義了一個修改過的模板爲您的按鈕，並可以利用觸發器來響應鼠標事件。

的風格添加到您的按鈕，請執行下列操作：

<Grid> 
    <Grid.Resources> 
     <!-- Put Style Here --> 
    </Grid.Resources> 
    <Button Style="{DynamicResource ExampleButtonStyle}"> 
     <TextBlock Grid.Row="1" Text="Some content"/> 
    </Button> 
</Grid>

你如何分配的樣式和控件實例之間的代碼是由你。您可能希望保持模塊化和可重用性。

解剖樣式

，如果你以前沒有探索的風格，他們可以是一個有點令人生畏和冗長。我已經解釋了下面提供的風格的組件。

您可以通過聲明樣式來開始新的樣式。在這裏，你必須提名一個目標類型（您想應用的樣式是什麼）和密鑰（樣式資源的名稱：

二傳手被用於製作風格

<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}"> 

    <!-- Style content goes here. --> 

</Style>

應用價值爲目標控件的屬性例如：。

<Setter Property="Background" Value="LightGray"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Height" Value="100"/> 
    <Setter Property="Width" Value="100"/>

因爲要更改按鈕的佈局，你會想提名控件模板要做到這一點，用二傳手設定按鈕的Template屬性這裏的模板可以包含您想要的任何佈局。ContentPresenter用於顯示您的實現中Button標籤的主體：

<Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
        <UniformGrid x:Name="uGrid"> 
         <Image Source="img.jpg" /> 
         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </UniformGrid> 
       </Border> 

       <ControlTemplate.Triggers> 
        <!-- Triggers here --> 
       </ControlTemplate.Triggers>     

      </ControlTemplate> 
     </Setter.Value> 
    </Setter>

最後，您需要添加觸發器以使控件模板更新與交互。觸發器基本上觀察控件的屬性，並在其值與觸發器指定的值相匹配時應用。這將使用內部的setter更新控件。

<Trigger Property="IsMouseOver" Value="false"> 
    <Setter TargetName="uGrid" Property="Rows" Value="2" /> 
    <Setter TargetName="uGrid" Property="Columns" Value="1" /> 
</Trigger>

佈局

爲了實現我用UniformGrid佈局的目標。 UniformGrid將自身分成相等的單元格以匹配內部的內容項目數量。請注意，這在WPF中可用，但不能在UWP中使用。在UniformGrid上，您可以設置「列」或「行數」，並根據需要對網格進行補償。在上面的樣式中，我改變了提名的行數和列數，並讓網格相應地調整自己的佈局。這從視覺上將內容從行切換到列。

參與討論

有可能做到這一點更優雅等方法，但樣式提供了大量的靈活性，並且具有更小的學習曲線。

你說你想將按鈕尺寸從100更改爲50（我假設在兩個軸上？），我必須告訴你不要這樣做。你會看到當你應用提供的風格時會發生什麼;該按鈕以100x100平方開始。用戶將鼠標移動到按鈕上方，直到按鈕的邊緣內。該按鈕從50x50迅速變爲100x100，直到鼠標完全移動到中心或關閉按鈕。這提供了一個糟糕和令人困惑的用戶體驗，值得更多思考。

來源

2017-07-31 00:35:26 Gui

暫時沒有評論！嗯，我不知道如何謝謝，這是太多了...謝謝你無限 –

聚苯乙烯：關於按鈕的大小，這是一個很好的觀點，我會看到如果它不會給用戶帶來麻煩，但我不得不說我只是改變高度而不是寬度，它是某種滑動菜單，一旦高度爲50，拼接網格將在空閒時增加50 ...可能會令人困惑^^「 –

沒問題。它可能是更容易將這種摺疊行爲放到按鈕中，因此同樣的觸發器可以「解開它」，如果它在按鈕中，你可以避免快速變化的問題，儘管用網格很容易想到事情，你可能會發現它更容易更改其他屬性來模擬相同的行爲，例如邊距和填充，例如，在某個東西下面顯示一個網格，可能類似於在下面添加一個邊距。隨着XAML的增長，像這樣的東西可以使閱讀起來不那麼讓人困惑。IE網格是用於佈局的，而不是廣告臨時定位。 – Gui

這可能是晚了，但根據什麼都在評論中有人說，這可能做的伎倆，我對類似工作最近

<Style x:Key="btnSubMenu" TargetType="{x:Type Button}"> 
    <Setter Property="Background" Value="White"/> 
    <Setter Property="BorderBrush" Value="Black"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="FontFamily" Value="Segoe UI"/> 
    <Setter Property="FontSize" Value="20"/> 
    <Setter Property="FontWeight" Value="ExtraBold"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
        <Grid x:Name="uGrid2"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="2*"/> 
          <RowDefinition Height="auto"/> 
         </Grid.RowDefinitions> 
         <Image Grid.Row="0" Source="/Images/1.png" /> 
         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         <Grid Grid.Row="2" Name="Gbexample" Visibility="Collapsed"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="40"/> 
           <RowDefinition Height="40"/> 
           <RowDefinition Height="40"/> 
           <RowDefinition Height="40"/> 
          </Grid.RowDefinitions> 
          <Button Grid.Row="0" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCity}" Name="btnCity"/> 
          <Button Grid.Row="1" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCountry}" Name="btnCountry"/> 
          <Button Grid.Row="2" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strStore}" Name="btnStoreIn"/> 
          <Button Grid.Row="3" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strLocation}" Name="btnLocation"/> 
         </Grid> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="false"> 
         <Setter TargetName="Gbproduct" Property="Visibility" Value="Collapsed" /> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter TargetName="Gbproduct" Property="Visibility" Value="Visible" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2017-08-03 15:01:26 Mugiwara

XAML，在動畫中移動兩個contentcontrol內的按鈕

回答

相關問題