2016-10-22 11 views
0

[UWP]こんにちは皆、私はusercontrolで苦労しています。私は自分のフィールドコンテナ(groupbox)を作成して、別のStackPanelを投稿したところで、ユーザーコントロールコンテンツコントロールが塗りつぶされません

StackPanelを挿入すると、空のスペースを効果的に表示することができません。私は様々なオプションでstrecthを設定しようとしましたが、何もしませんでした。

これは私のユーザーコントロールのコードです:

<UserControl Name="groupBoxUC" 
x:Class="AgendaUWP.Common.CustomControls.GroupBox" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:AgendaUWP.Common.CustomControls" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:interop="using:Windows.UI.Xaml.Interop" 
mc:Ignorable="d" 
d:DesignHeight="200" 
d:DesignWidth="300"> 

    <StackPanel x:Name="myStackPanel" BorderThickness="1" BorderBrush="Gray" Orientation="Vertical"> 
    <StackPanel Margin="10 0 0 0" HorizontalAlignment="Left" > 
     <Border Background="{StaticResource secondaryColor}" Height="5" Width="{Binding ActualWidth, ElementName=HeaderText}"/> 
     <TextBlock x:Name="HeaderText" FontSize="18" FontWeight="ExtraLight" Text="{x:Bind Header,Mode=TwoWay}"/> 
    </StackPanel> 

    <ContentControl Padding="10 20 10 20" Content="{Binding InnerContent,ElementName=groupBoxUC}" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      HorizontalContentAlignment="Stretch" 
      VerticalContentAlignment="Stretch" /> 
</StackPanel> 

マイコード-Bheindユーザーコントロール:

[ContentProperty(Name = "InnerContent")] 
public sealed partial class GroupBox : UserControl 
{ 
    internal static readonly DependencyProperty InnerContentProperty = 
    DependencyProperty.Register("InnerContent", typeof(object), typeof(GroupBox), new PropertyMetadata(null)); 

    internal static readonly DependencyProperty HeaderProperty = 
    DependencyProperty.Register("Header", typeof(string), typeof(GroupBox), new PropertyMetadata(null)); 


    public GroupBox() 
    { 
     this.InitializeComponent(); 
    } 

    public object InnerContent 
    { 
     get { return (object)GetValue(InnerContentProperty); } 
     set { SetValue(InnerContentProperty, value); } 
    } 
    public string Header 
    { 
     get { return (string) GetValue(HeaderProperty); } 
     set { SetValue(HeaderProperty, value); } 
    } 

} 

これは私がそれを使用する方法です:

<CustomControls:GroupBox x:Name="grpCoordinate" Header="Coordinate" Margin="30,40,30,0" > 
       <StackPanel HorizontalAlignment="Left"> 
        <TextBox Header="Longitudine:" Text="{x:Bind ViewModel.Cliente.Longitudine, Mode=TwoWay}" HorizontalAlignment="Stretch" /> 

        <TextBox Header="Latitudine:" Text="{x:Bind ViewModel.Cliente.Latitudine, Mode=TwoWay}" HorizontalAlignment="Stretch" /> 


       </StackPanel> 

      </CustomControls:GroupBox> 

これは私の結果です:

enter image description here

EDIT:

は、恐れ入りますが、私は、コードや画像を貼り付けることが間違っていました。私は訂正: 私の使用法は以下の通りです:

   <CustomControls:GroupBox x:Name="grpDatiAnagrafici" Header="Dati Anagrafici" VerticalAlignment="Top" Margin="30,0,30,0" Grid.Column="0" Grid.Row="0" > 

       <StackPanel x:Name="stkDatiAnagrafici" Orientation="Horizontal"> 
        <StackPanel Padding="0 0 20 0"> 
         <TextBox Header="Codice:" Text="{x:Bind ViewModel.Cliente.Codice, Mode=TwoWay}" IsReadOnly="True" IsEnabled="False"/> 
         <TextBox Header="Ragione Sociale:" Text="{x:Bind ViewModel.Cliente.RagioneSociale, Mode=TwoWay}" /> 
         <TextBox Header="Nome:" Text="{x:Bind ViewModel.Cliente.Nome, Mode=TwoWay}" /> 
         <TextBox Header="Cognome:" Text="{x:Bind ViewModel.Cliente.Cognome, Mode=TwoWay}" /> 
        </StackPanel> 
        <StackPanel> 
         <TextBox Header="Indirizzo:" Text="{x:Bind ViewModel.Cliente.Indirizzo, Mode=TwoWay}" /> 
         <TextBox Header="Comune:" Text="{x:Bind ViewModel.Cliente.Comune, Mode=TwoWay}" /> 
         <TextBox Header="Cap:" Text="{x:Bind ViewModel.Cliente.Cap, Mode=TwoWay}" /> 
         <TextBox Header="Provincia:" Text="{x:Bind ViewModel.Cliente.Provincia, Mode=TwoWay}" /> 

        </StackPanel> 
       </StackPanel> 
      </CustomControls:GroupBox> 

と、この私の結果: enter image description here

EDIT 2:明確化のため

おかげで、しかし、のStackPanelを維持する方法はありますか? 私はVisualStateManagerを管理しなければならないので、私は説明します:

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="WindowStates"> 
      <VisualState x:Name="WideState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="stkDatiAnagrafici.Orientation" Value="Horizontal" />   
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="NarrowState"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="stkDatiAnagrafici.Orientation" Value="Vertical" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

私は、グリッドを使用している場合、私はまた、デバイス上で動作しているときに、第2の下部にグループを配置するGrid.Rowを指定する必要があるため。

答えて

2

StackPanelから、InnterContentの2つのテキストボックスを含むHorizontalAlignment="Left"を削除します。

<CustomControls:GroupBox x:Name="grpCoordinate" Header="Coordinate" Margin="30,40,30,0"> 
    <StackPanel> <!-- Removed HorizontalAlignment="Left" from here --> 
     <TextBox Header="Longitudine:" Text="{x:Bind ViewModel.Cliente.Longitudine, Mode=TwoWay}" HorizontalAlignment="Stretch" /> 
     <TextBox Header="Latitudine:" Text="{x:Bind ViewModel.Cliente.Latitudine, Mode=TwoWay}" HorizontalAlignment="Stretch" /> 
    </StackPanel> 
</CustomControls:GroupBox> 

また、これは必要ありませんが、私はContentPresenterContentControlを変更すると思います。あなたはバインディングのElementNameを避け、ちょうどXを使用することができます。代わりに直接バインドします

<ContentPresenter Padding="10 20 10 20" Content="{x:Bind InnerContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 

EDIT水平StackPanelは、それぞれの子要素間で利用可能なスペースを配布することはできない

、それは各子供のDesiredSizeを敬うだけです。代わりにGridを使用する必要があります。あなたはまだGridを使用することができます

<Grid x:Name="stkDatiAnagrafici"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 

    <StackPanel Grid.Column="0" Padding="0 0 20 0"> 
     <TextBox Header="Codice:" Text="{x:Bind ViewModel.Cliente.Codice, Mode=TwoWay}" IsReadOnly="True" IsEnabled="False"/> 
     <TextBox Header="Ragione Sociale:" Text="{x:Bind ViewModel.Cliente.RagioneSociale, Mode=TwoWay}" /> 
     <TextBox Header="Nome:" Text="{x:Bind ViewModel.Cliente.Nome, Mode=TwoWay}" /> 
     <TextBox Header="Cognome:" Text="{x:Bind ViewModel.Cliente.Cognome, Mode=TwoWay}" /> 
    </StackPanel> 
    <StackPanel Grid.Column="1"> 
     <TextBox Header="Indirizzo:" Text="{x:Bind ViewModel.Cliente.Indirizzo, Mode=TwoWay}" /> 
     <TextBox Header="Comune:" Text="{x:Bind ViewModel.Cliente.Comune, Mode=TwoWay}" /> 
     <TextBox Header="Cap:" Text="{x:Bind ViewModel.Cliente.Cap, Mode=TwoWay}" /> 
     <TextBox Header="Provincia:" Text="{x:Bind ViewModel.Cliente.Provincia, Mode=TwoWay}" /> 
    </StackPanel> 
</Grid> 

EDIT 2

、あなたはそれに正しい外観を与えるためにあなたの視覚的な状態で正しいプロパティを設定する必要があります。 StackPanelを使用する方法はありません。子供の幅を分散しないからです。

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="WindowStates"> 
     <VisualState x:Name="WideState"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="600"/> 
      </VisualState.StateTriggers> 
     </VisualState> 
     <VisualState x:Name="NarrowState"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0"/> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="stack1.Padding" Value="0"/> 
       <Setter Target="stack2.Padding" Value="0"/> 
       <Setter Target="stack2.(Grid.Column)" Value="0"/> 
       <Setter Target="stack2.(Grid.Row)" Value="1"/> 
       <Setter Target="stkDatiAnagrafici.ColumnDefinitions[1].Width" Value="0"/> 
       <Setter Target="stkDatiAnagrafici.RowDefinitions[1].Height" Value="*"/> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

<CustomControls:GroupBox x:Name="grpDatiAnagrafici" Header="Dati Anagrafici" VerticalAlignment="Top" Margin="30,0,30,0" Grid.Column="0" Grid.Row="0" > 
    <Grid x:Name="stkDatiAnagrafici"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition Height="0"/> 
     </Grid.RowDefinitions> 

     <StackPanel x:Name="stack1" Grid.Column="0" Padding="0 0 10 0"> 
      <TextBox Header="Codice:" IsReadOnly="True" IsEnabled="False"/> 
      <TextBox Header="Ragione Sociale:"/> 
      <TextBox Header="Nome:"/> 
      <TextBox Header="Cognome:"/> 
     </StackPanel> 
     <StackPanel x:Name="stack2" Grid.Column="1" Padding="10 0 0 0"> 
      <TextBox Header="Indirizzo:"/> 
      <TextBox Header="Comune:"/> 
      <TextBox Header="Cap:"/> 
      <TextBox Header="Provincia:"/> 
     </StackPanel> 
    </Grid> 
</CustomControls:GroupBox> 

EDIT 2B

あなたは(2つの以上の列の)より一般的な解決を望むなら、あなたは常に均等にスペースを配布し、独自のカスタムStackPanel書くことができます。

class FilledStackPanel : StackPanel 
{ 
    protected override Size MeasureOverride(Size availableSize) 
    { 
     var childSize = Orientation == Orientation.Horizontal ? 
      new Size(availableSize.Width/Children.Count, availableSize.Height) : 
      new Size(availableSize.Width, availableSize.Height/Children.Count); 

     double alongAxis = 0; 
     double crossAxis = 0; 

     foreach (var child in Children) 
     { 
      child.Measure(childSize); 

      if (Orientation == Orientation.Horizontal) 
      { 
       alongAxis += child.DesiredSize.Width; 
       crossAxis = Math.Max(crossAxis, child.DesiredSize.Height); 
      } 
      else 
      { 
       alongAxis += child.DesiredSize.Height; 
       crossAxis = Math.Max(crossAxis, child.DesiredSize.Width); 
      } 
     } 

     return Orientation == Orientation.Horizontal ? 
      new Size(alongAxis, crossAxis) : 
      new Size(crossAxis, alongAxis); 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     var childSize = Orientation == Orientation.Horizontal ? 
      new Size(finalSize.Width/Children.Count, finalSize.Height) : 
      new Size(finalSize.Width, finalSize.Height/Children.Count); 

     double alongAxis = 0; 

     foreach (var child in Children) 
     { 
      if (Orientation == Orientation.Horizontal) 
      { 
       child.Arrange(new Rect(alongAxis, 0, childSize.Width, childSize.Height)); 
       alongAxis += childSize.Width; 
      } 
      else 
      { 
       child.Arrange(new Rect(0, alongAxis, childSize.Width, childSize.Height)); 
       alongAxis += childSize.Height; 
      } 
     } 

     return finalSize; 
    } 
} 

Gridを使用する必要がなくなり、の代わりにFilledStackPanelを使用できます前に。

+0

回答をいただきありがとうございますが、質問を修正しましたが、例を貼り付けるのが間違っていました – Brux88

+0

StackPanelを維持する方法がありますか? 私はVisualStateManagerを管理する必要があるので説明します。 私は私の願いを編集する – Brux88

関連する問題