2016-07-11 9 views
0

私の最初のWPFプロジェクトで、独自の展開可能/折り畳み可能なメニュー(創造的にはExpandingMenuと呼ばれる)を作成しようとしています。私はすでに2行のGrid(行1はコントロールを折りたたんで展開するためのボタンで、行2はStackPanelを回転させるためのボタンで、ToggleButtonsは現在スタックしています)からなるユーザーコントロールが1つあります。私の回転ボタンのために、私はちょうど彼ら自身もUserControlsにすることに決めました。StackPanel内のコントロールの回転

ボタン(私はExpandingMenuButtonsそれらを呼んでいる)私は取得した後、私はこれらのボタンにいくつかの余分なカスタムロジックを追加することもできますので、(私はこのようにそれをやってと思っていた1x1 GridToggleButtonすぎません標準的な振る舞いが整理された)。私はそれらを私のメニューコントロールに正常に追加できます。私はのGridで回転させることさえできます。

しかし、実際にはわかるように、回転するとスイングします。これは彼らが高すぎるだけでなく、遠くまで拡大する可能性もあります。

これは、私が現在行っていることですが、回転を試みる前に、期待どおりに動作しています。 This is what I currently have, before attempting rotations, it is behaving as expected.

これは私が達成しようとしている(塗料の魔法を使って編集した)ものです。私は1つのボタンを回転させたときに、私は何ができるか...
what I'm trying to accomplish

を私は私のMenuコントロールでこの正しい動作を(日焼けエリア)を得ることができますが、私はテスト目的のために、その間に拡大/契約イベントを台無しにしました(私が以前に述べたように、私は自分のテストが目的のためにいくつかの動作を混乱させているので、各ボタンはクリックで回転するように設定されています。ご覧のように、このボタンは元の場所から振り向いています。上のボタンが部分的に/完全に見えなくなります。代わりに、私は彼らが適切な場所に回転してほしいです。私は1つが正しく動作し得れば、私は私が、なぜ私は物事をこのようにしようとしているのと同じ方法で、行動残りの部分を取得するのは簡単だろうと想定。..
What I can do when I rotate 1 button

マイボタンのコードは以下の通りです:

<UserControl x:Class="App.Controls.ExpandingMenuButton" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:App.Controls" 
     mc:Ignorable="d" 
     d:DesignHeight="30" d:DesignWidth="100"> 
    <Grid Name="ButtonGrid" Height="30"> 
     <ToggleButton Name="MenuButton" Background="Aqua" BorderThickness="0 0 0 1" Click="MenuButton_Click" Content="TEST"></ToggleButton> 
    </Grid> 
</UserControl> 

これまでExpandingMenuButton.xaml.csで唯一の "本物" のコード:

private void MenuButton_Click(object sender, RoutedEventArgs e) 
{ 
    //I know this is not practical, it is used for quick testing. 
    ButtonGrid.RenderTransform = new RotateTransform(-90); 
} 

これまでの私のメニューコード:

<UserControl x:Class="App.Controls.ExpandingMenu" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:App.Controls" 
     mc:Ignorable="d" 
     Name="ucExpandingMenu" 
     MinWidth="32" 
     d:DesignHeight="300" d:DesignWidth="100"> 
<UserControl.Resources> 
    <SolidColorBrush x:Key="BackColor" Color="PeachPuff"/> 
    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect. http://stackoverflow.com/a/4182205/2957232 --> 
    <Style x:Key="ExpandButtonStyle" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
         BorderThickness="0 0 0 1" 
         BorderBrush="Black" 
         Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="border" Property="BorderBrush" Value="Black" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <StackPanel Name="MenuPanel" Width="100" HorizontalAlignment="Left" Background="{DynamicResource BackColor}" Grid.Row="1"> 
     <!--Contents will go here--> 
    </StackPanel> 
    <Button Style="{StaticResource ExpandButtonStyle}" Width="100" Height="32" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Stretch" Panel.ZIndex="1" Background="{DynamicResource BackColor}" BorderThickness="0" Click="Button_Click" Content="&#187;"></Button> 
    <Button Name="DummyFocus" Panel.ZIndex="0" Height="0" Width="0"></Button> 
</Grid> 
</UserControl> 

そして再びこれまでのところ、このクラスでは、唯一の「本物の」コード:

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    MenuPanel.Children.Add(new ExpandingMenuButton("TEST ITEM")); 
} 

WPFの知識の私の不足を言い訳してください、私もそこに私Winformsの、の世界から来しようとしていますこのようなことについては知識が不足しています。私はコードがちょっと面白いように見えるが、うまくいけば、私がここで何をしているのかをイメージが示すことを願っているこれまでは、グリッドとHorizo​​ntalAlignmentが「Left」に設定されたダミーウィンドウでこれをテストしています。何もない。

+0

あなたは 'TabControl'を試して、自分のニーズに合わせてカスタマイズすることができます。それは 'TabStripPlacement'プロパティを持っています。 – AnjumSKhan

+0

もしあなたが 'StackPanel'を使うことに決めたら、個々の要素ではなく、' StackPanel'(水平に設定)全体を回転させることをお勧めします。具体的な助けが必要な場合は、これまでに得られたことを明確に示す良い[mcve]を提供してください。 –

答えて

3
  1. LayoutTransformを使用してください。 RenderTransformを使用しても、他のコントロール(親を含む)のレンダリング/レイアウトの方法には影響しません。 LayoutTransformです。
  2. 変換全体をUserControlにシフトします。代わりにXAMLで直接指定することもできます。

例:

<UserControl.LayoutTransform> 
    <RotateTransform Angle="-90" /> 
</UserControl.LayoutTransform> 
+0

恐ろしい!ありがとうございました!私は何らかの点で 'LayoutTransform'を試したことを誓うことができました...私はそれがうまく動作しなかった後、私の心の中で失われてしまったでしょう。' RenderTransform'を使用しました:/なぜ私は考えていないのか分かりませんグリッド全体を変換する... –

関連する問題