基本的なWPFレイアウトの質問

Question

私はWPFを学習しており、何らかのベストプラクティスに従おうとしています。私は一瞬のうちに失われており、ある方向性が必要です。

私はテキストファイル（エラーログ）を読み取り、個々のエラーメッセージに分割する非常に単純なアプリケーションを作成しています。私はこれらのメッセージ（モデルオブジェクトに格納されている）をメッセージのリストとして表示したいと思います。リストは多くのアイテムで構成され、サイズ変更可能なウィンドウが必要なので、垂直スクロールバーが必要ですが、コンテンツをラップする（つまり、水平スクロールバーは不要です）。

<Window x:Class="ErrorLog.UI.WPF.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="800" Width="1200" Loaded="Window_Loaded"> 

<StackPanel Name="mainContainer"> 
    <StackPanel Orientation="Horizontal" Name="Menu"> 
     <Button Name="Refresh">Refresh</Button> 
    </StackPanel>   
    <ScrollViewer VerticalScrollBarVisibility="Auto"> 
     <StackPanel Name="errorMessagePlaceHolder"></StackPanel> 
    </ScrollViewer> 
</StackPanel> 

私は背後にあるコードでファイルを読み込み、値がエラーメッセージであるとテキストボックスの束としてのStackPanelに追加した瞬間にしています。

private void LoadData() 
    { 
     IErrorLogReader errorLogReader = new ErrorLogReader(); 
     var errors = errorLogReader.RetrieveErrors(); 

     if (errors.Count == 0) 
     { 
      TextBox noErrors = new TextBox(); 
      noErrors.Text = "No errors found"; 
      errorMessagePlaceHolder.Children.Add(noErrors); 
     } 
     else 
     { 
      for (var i = errors.Count - 1; i > 0; i--) 
      { 
       TextBox errorMessage = new TextBox(); 

       errorMessage.IsReadOnly = true; 
       errorMessage.Padding = new Thickness(10); 

       errorMessage.Text = errors[i].ErrorMessage; 
       errorMessage.TextWrapping = TextWrapping.Wrap; 

       errorMessage.MouseEnter += ErrorMessageMouseEnter; 
       errorMessage.MouseLeave += ErrorMessageMouseLeave; 

       errorMessagePlaceHolder.Children.Add(errorMessage); 
      } 
     } 
    } 

    protected void ErrorMessageMouseEnter(object sender, RoutedEventArgs e) 
    { 
     ((TextBox) sender).Background = Brushes.AntiqueWhite; 
    } 

    protected void ErrorMessageMouseLeave(object sender, RoutedEventArgs e) 
    { 
     ((TextBox) sender).Background = null; 
    } 

だから私は知りたいと思う最初の事は次のとおりです：

• は、私はOK結合しています方法です私はまた、このようないくつかのマウスオーバー効果を追加しましたか？
• スクロールバーが無効になっています
• 私はマウスオーバーエフェクトを悪くしていますか？

乾杯。

Answer 1

私はバインドしていますか？

これはうまくいくかもしれませんが、ベストプラクティスではありません。ベストプラクティスは、実際のデータバインディングを使用することです。まず、StackPanelをリストにバインドできるものに置き換える必要があります。 ItemsControlは単純なStackPanelに最も近いもので、他のオプションはListBoxなどです。

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <ItemsControl Name="errorMessageList" /> 
</ScrollViewer> 

private void LoadData() 
{ 
    IErrorLogReader errorLogReader = new ErrorLogReader(); 
    var errors = errorLogReader.RetrieveErrors(); 

    errorMessageList.ItemsSource = errors; 
} 

あなたは、エラーメッセージが表示されるようにする方法を指定するには、ItemsControlのためのテンプレートを設定することができます。

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <ItemsControl Name="errorMessageList"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <TextBox IsReadOnly="true" ... Text="{Binding ErrorMessage}" /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</ScrollViewer> 

---

スクロールバーがあります来ることができません

ScrollViewerをStackPanelの中​​にネストしています。これはうまくいかない：StackPanelは必要なだけ垂直方向のスペースをとり、は常ににスクロールバーを表示しないようにする。トップレベルのStackPanelは、が利用可能なスペースだけで置き換える必要があります。;例えばDockPanel、：

<DockPanel Name="mainContainer"> 
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Name="Menu"> 
     <Button Name="Refresh">Refresh</Button> 
    </StackPanel>   
    <ScrollViewer VerticalScrollBarVisibility="Auto"> 
     <StackPanel Name="errorMessagePlaceHolder"></StackPanel> 
    </ScrollViewer> 
</StackPanel> 

---

は私が悪いマウスオーバー効果をやっている方法ですか？

代わりにスタイルとトリガーを使用できます。次のスタイルを定義します

<Window ...> 
    <Window.Resources> 
     <Style x:Key="hoverTextBox" TargetType="{x:Type TextBox}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Background" Value="AntiqueWhite" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    ... 
</Window> 

をし、DataTemplateの中にあなたのTextBoxにそれを割り当てます。そのため

<TextBox IsReadOnly="true" ... Text="{Binding ErrorMessage}" 
     Style="{StaticResource hoverTextBox}" />