2

私はスケジューリング ツールを作成しており、多くのカレンダー アプリで利用できる「日」に似たビューが必要です。

これは ListBox として行われるため、ユーザーはイベントを選択できます。イベントをバインドしようとすると問題が発生します - 選択が期待どおりに機能しません。これは、コンテナの一番上まで引き伸ばされたように見えることを意味します。さらに、クリック イベントは要素では処理されず、要素とコンテナの上端の間のスペースで処理されます。

以下に例を示します: 左側 - どのように機能し、どのように見えるか。これは、2 つの ListBoxItems を手動で配置することによって行われます。右側はバインディングを使用。

ここに画像の説明を入力 ここに画像の説明を入力

両方のケースのビジュアル ツリーを WPF デバッグ ツールで比較したところ、 ContentPresenterなどにわずかな違いがありますが、そこで何が起こっているのか、なぜ違いが生じるのか、どうすればそれを削除できるのか正確にはわかりません。

ここに私のXAMLがあります:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="PLA1.MainWindow"
    x:Name="Window"
    xmlns:local="clr-namespace:PLA1"
    Title="MainWindow"
    Width="640" Height="480">

    <Window.Resources>
        <local:MarginConverter x:Key="marginConverter"/>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
           <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ListBoxItem Margin="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" Height="{Binding Path=Duration}" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                        <StackPanel>
                            <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                            <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                        </StackPanel>
                    </ListBoxItem>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Effect>
                <DropShadowEffect Opacity="0.625"/>
            </ListBox.Effect>

            <!-- uncomment these two lines to test binding -->
            <!--local:Event Duration="200" StartMinutes="60" Name="Sprawdzian" Place="EA32" />
            <local:Event Duration="120" StartMinutes="300" Name="Oddanie projektu" Place="308" /-->

            <ListBoxItem Margin="0,60,0,0" Height="200" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                <StackPanel>
                    <TextBlock Text="Sprawdzian" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="EA32"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>
            </ListBoxItem>      

            <ListBoxItem Margin="0,300,0,0" Height="120" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
                <StackPanel>
                    <TextBlock Text="Oddanie projektu" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="308"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>
            </ListBoxItem>  
        </ListBox>
    </Grid>
</Window>

イベントクラス:

public class Event
{
    public int StartMinutes { get;set; }
    public int Duration { get; set; }
    public string Name { get; set; }
    public string Place { get; set; }

    public Event() { }
}

MarginConverterクラス:

public class MarginConverter : IValueConverter
{
    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return new Thickness(0, (int)(value), 0, 0);
    }

    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}
4

2 に答える 2

1

適切なプロパティを設定して変更するリソースにListBoxItemスタイルを追加する必要があります。ListBoxItemTemplate

<ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
    <ListBox.Resources>                   
        <Style TargetType="ListBoxItem">
            <Setter Property="Margin" Value="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" />
            <Setter Property="Height" Value="{Binding Path=Duration}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="#80000000" />
            <Setter Property="Width" Value="150" />
            <Setter Property="Background" Value="#8000FF00" />
        </Style>
    </ListBox.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>                    
                <StackPanel>
                    <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                    <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                </StackPanel>                        
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Effect>
        <DropShadowEffect Opacity="0.625"/>
    </ListBox.Effect>

    <!-- uncomment these two lines to test binding -->
    <local:Event Duration="200" StartMinutes="60" Name="Sprawdzian" Place="EA32" />
    <local:Event Duration="120" StartMinutes="300" Name="Oddanie projektu" Place="308" />

    <!--<ListBoxItem Margin="0,60,0,0" Height="200" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
        <StackPanel>
            <TextBlock Text="Sprawdzian" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
            <TextBlock Text="EA32"  Margin="8,0,0,0" FontSize="14"/>
        </StackPanel>
    </ListBoxItem>

    <ListBoxItem Margin="0,300,0,0" Height="120" Width="150" Background="#8000FF00" Foreground="White" BorderThickness="2" BorderBrush="#80000000">
        <StackPanel>
            <TextBlock Text="Oddanie projektu" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
            <TextBlock Text="308"  Margin="8,0,0,0" FontSize="14"/>
        </StackPanel>
    </ListBoxItem>-->
</ListBox>

ListBoxItem2 つのアイテムを含むビジュアル ツリー:

ここに画像の説明を入力

この例ではすべて問題Heightなく、Marginプロパティはコードで設定されています。

Event2 つのアイテムを含むビジュアル ツリー:

ここに画像の説明を入力

この例では、として定義ItemTemplateしましListBoxItemたが、デフォルトListBoxではコンテナも追加されるListBoxItemため、2 つListBoxItemあり、内部にのみ高さとマージンを設定しているため、ここで問題が発生しますListBoxItem。OuterListBoxItemにはデフォルトのプロパティがあります。

これを自分で確認したい場合は、この snoop ( http://snoopwpf.codeplex.com/ ) を使用できます。

于 2013-10-20T20:00:45.830 に答える
0

以下のように ListBox を更新してみてください。

  <ListBox Margin="8,8,0,8" Background="#C9BBC0FF" HorizontalAlignment="Left" Width="160">
       <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
           <Style TargetType="ListBoxItem">
                    <Setter Property="Height" Value="{Binding Duration}"/>
                     <Setter Property="Margin" Value="{Binding Path=StartMinutes, Converter={StaticResource marginConverter}}" />
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                    <StackPanel Background="#8000FF00" BorderThickness="2" BorderBrush="#80000000">
                        <TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" Width="130" TextWrapping="Wrap" FontWeight="Bold" FontSize="18" />
                        <TextBlock Text="{Binding Path=Place}"  Margin="8,0,0,0" FontSize="14"/>
                    </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
于 2013-10-20T19:59:50.003 に答える