在運行時調整形狀

Question

我有一個房子的簡單繪圖，我想調整屋頂改變其寬度，因爲房子的身體改變它的寬度和/或門適應房屋的寬度。我已經在任何解決方案上工作了幾個小時，但工作的代碼似乎只是複雜的執行像這樣的初學者項目。這是我的代碼。我嘗試了一些使用mouseLeftButtonDown連接身體的函數，但它不起作用。

<Window x:Class="LAB2.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="MainWindow" Height="400" Width="600"> 

       <Canvas UseLayoutRounding="True"> 
       <Rectangle Canvas.Left="86" Canvas.Top="190" Height="171" Fill="Blue" Name="body" Stroke="Black" MouseEnter="body_MouseEnter" MouseLeave="body_MouseLeave" Width="395" /> 
       <Rectangle Canvas.Left="118" Canvas.Top="229" Height="82" Fill="{Binding ElementName=body, Path=Fill}" Name="window" Stroke="Black" Width="89"/> 
       <Rectangle Canvas.Left="346" Canvas.Top="229" Fill="{Binding ElementName=body, Path=Fill}" Height="132" Name="door" Stroke="Black" Width="83"/> 
       <Polygon Points="10,110 230,10 500,110" Fill="{Binding ElementName=body, Path=Fill}" Stroke="Black" Name="triangle" Canvas.Left="35" Canvas.Top="86" /> 
       <Rectangle Canvas.Left="156" Canvas.Top="109" Height="61" Fill="{Binding ElementName=body, Path=Fill}" Name="chimney" Stroke="Black" Width="36" /> 
       <Button Canvas.Left="491" Canvas.Top="12" Content="Click" Height="23" Name="button1" Width="75" /> 
      </Canvas> 

</Window> 

我將非常感謝任何有關此任務的建議或指導。

Answer 1

好的，這裏是你的解決方案...我再次使用簡單的觸發器。

<Control> 
     <Control.Template> 
      <ControlTemplate> 
       <Canvas> 
        <Grid x:Name="HouseBody" Height="153" Width="350" HorizontalAlignment="Left" VerticalAlignment="Bottom" Canvas.Left="78" Canvas.Top="159"> 
         <Rectangle Height="Auto" Fill="Blue" x:Name="body" Stroke="Black" Width="Auto"/> 
         <Rectangle Height="Auto" Fill="Blue" x:Name="window" Stroke="Black" Width="89" HorizontalAlignment="Left" Margin="25,17,0,54"/> 
         <Rectangle Fill="Blue" Height="Auto" x:Name="door" Stroke="Black" Width="Auto" Margin="235.5,17,25.5,0" HorizontalAlignment="Stretch"/> 
        </Grid> 
        <Grid x:Name="HouseRoof" Height="131.5" Width="350" HorizontalAlignment="Left" VerticalAlignment="Bottom" Canvas.Left="77" Canvas.Top="27.5"> 
         <Rectangle Height="Auto" Fill="Blue" x:Name="chimney" Stroke="Black" Width="40" HorizontalAlignment="Stretch" Margin="44.066,22.965,265.934,8" /> 
         <Path x:Name="path" Data="M74.752528,159.37536 L429.11068,159.37578 242,26.5 z" Fill="Blue" Height="Auto" Stretch="Fill" Stroke="Black" Width="Auto" Margin="0.25,0,-2.589,-0.865"/> 
        </Grid> 
       </Canvas> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="body" Property="Fill" Value="Red" /> 
         <Setter TargetName="window" Property="Fill" Value="Red" /> 
         <Setter TargetName="door" Property="Fill" Value="Red" /> 
         <Setter Property="Fill" TargetName="path" Value="Red"/> 
         <Setter Property="Fill" TargetName="chimney" Value="Red"/> 
         <Setter Property="Width" TargetName="HouseBody" Value="395"/> 
         <Setter Property="Width" TargetName="HouseRoof" Value="395"/> 
        </Trigger> 
        <!--<Trigger Property="IsMouseOver" Value="False"> 
         <Setter TargetName="body" Property="Fill" Value="Green" /> 
         <Setter TargetName="window" Property="Fill" Value="Green" /> 
         <Setter TargetName="door" Property="Fill" Value="Green" /> 
         <Setter TargetName="triangle" Property="Fill" Value="Green" /> 
        </Trigger>--> 
       </ControlTemplate.Triggers>  
      </ControlTemplate> 
     </Control.Template> 
    </Control> 

只有很大的變化是我用Path替代了多邊形。希望我幫助。當您將對象分組到命名的網格中時，您可以對StoryBoards進行相同的操作，當然也可以使用codeBehind和C＃，這更容易。你只設置網格寬度和完成。

這將是這樣的：

XAML：

<Grid> 
    <Canvas MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp"> 
     <Grid x:Name="HouseBody" Height="153" Width="350" HorizontalAlignment="Left" VerticalAlignment="Bottom" Canvas.Left="78" Canvas.Top="159"> 
      <Rectangle Height="Auto" Fill="Blue" x:Name="body" Stroke="Black" Width="Auto"/> 
      <Rectangle Height="Auto" Fill="Blue" x:Name="window" Stroke="Black" Width="89" HorizontalAlignment="Left" Margin="25,17,0,54"/> 
      <Rectangle Fill="Blue" Height="Auto" x:Name="door" Stroke="Black" Width="Auto" Margin="235.5,17,25.5,0" HorizontalAlignment="Stretch"/> 
     </Grid> 
     <Grid x:Name="HouseRoof" Height="131.5" Width="350" HorizontalAlignment="Left" VerticalAlignment="Bottom" Canvas.Left="77" Canvas.Top="27.5"> 
      <Rectangle Height="Auto" Fill="Blue" x:Name="chimney" Stroke="Black" Width="40" HorizontalAlignment="Stretch" Margin="44.066,22.965,265.934,8" /> 
      <Path x:Name="path" Data="M74.752528,159.37536 L429.11068,159.37578 242,26.5 z" Fill="Blue" Height="Auto" Stretch="Fill" Stroke="Black" Width="Auto" Margin="0.25,0,-2.589,-0.865"/> 
     </Grid> 
    </Canvas> 
</Grid> 

而且代碼隱藏：

的一切，如果你確實有一些代碼

private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
     HouseBody.Width = 400; 
     HouseRoof.Width = 400; 
    } 

    private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    { 
     HouseBody.Width = 350; 
     HouseRoof.Width = 350; 
    }