0

我的 WPF 应用程序将时间线显示为 UserControl，因此使用滚动查看器。

UserControl 的宽度取决于某些值，因此可以是 0 像素宽到 N 宽。

我遇到的问题是让 WPF 知道它的宽度。

<UserControl x:Class="TimeLineCanvas.UserControls.TimeLine"
         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:helper="clr-namespace:TimeLineCanvas.Helpers"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,AncestorType=Window}}">
<Grid>

    <Grid.Resources>
        <ResourceDictionary Source="../ResourceDictionary.xaml" />
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height="300" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="450"></ColumnDefinition>
        <ColumnDefinition Width="200"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="0" Grid.Column="0" Margin="10">
        <Grid>
            <!--<Grid HorizontalAlignment="Left" Width="500">-->

            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="110" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Canvas x:Name="MyCanvasMarkers" Grid.Row="0"  VerticalAlignment="Top" Grid.Column="0" /> <!-- this will always be the widest of the canvas's-->

            <Canvas x:Name="MyCanvasShowEvents" Grid.Row="1" Grid.Column="0" />

            <Canvas x:Name="MyCanvasFailEvents" Grid.Row="1" Grid.Column="0" />
        </Grid>
    </ScrollViewer>

    <!-- I doubt anything below this is useful for this post but I keep it in case I'm wrong-->

    <Grid x:Name="ConfigurationGrid" Grid.Column="1" Grid.Row="0" >

        <StackPanel>
            <Expander IsExpanded="True">
                <Expander.Header>
                    <TextBlock Text="Zoom" />
                </Expander.Header>
                <Expander.Content>
                    <Border Style="{StaticResource LightBorder}">
                        <StackPanel>

                            <TextBlock Text="Select Zoom Out Level" />
                            <ComboBox ItemsSource="{Binding ScaleFactorOptions}" 
              SelectedItem="{Binding SelectedScaleFactor, UpdateSourceTrigger=PropertyChanged}"                   
              HorizontalAlignment="Left" 
              SelectionChanged="ZoomLevel_SelectionChanged"
              >
                                <ComboBox.Resources>
                                    <helper:ZoomConverter x:Key="ZoomConverter" />
                                </ComboBox.Resources>
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Converter={StaticResource ZoomConverter}}" />
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                        </StackPanel>
                    </Border>
                </Expander.Content>
            </Expander>

            <Expander IsExpanded="True" >
                <Expander.Header>
                    <TextBlock Text="Time Period" />
                </Expander.Header>
                <Expander.Content>
                    <Border Style="{StaticResource LightBorder}">
                        <StackPanel>
                            <TextBlock Text="Change Time Period" />
                            <ComboBox ItemsSource="{Binding PeriodOptions}" 
              SelectedItem="{Binding SelectedPeriod, UpdateSourceTrigger=PropertyChanged}"                   
              HorizontalAlignment="Left" 
              SelectionChanged="TimePeriod_SelectionChanged"
              >
                            </ComboBox>
                        </StackPanel>
                    </Border>
                </Expander.Content>
            </Expander>

            <Expander IsExpanded="True">
                <Expander.Header>
                    <TextBlock Text="Properties" />
                </Expander.Header>
                <Expander.Content>
                    <Border Style="{StaticResource LightBorder}">
                        <StackPanel>
                            <TextBlock x:Name="txtProperty"/>
                        </StackPanel>
                    </Border>
                </Expander.Content>
            </Expander>
        </StackPanel>
    </Grid>
</Grid>

正如您在上面的代码中看到的那样，我已经注释掉了将宽度设置为 500 的行。当我这样做时，滚动条出现，我可以滚动查看可能与宽度一致或不一致的值我的画布。

我还尝试添加一个ColumnDefintion = Auto只是为了看看这是否会有所帮助，但没有。

我是否必须在后面的代码中计算出 Canvas 的宽度，然后手动设置宽度，或者 XAML 是否可以通过使用属性Stretch内HoriztonalAlignment（或类似属性）自动为我执行此操作？

4

3 回答 3

0

尝试这个

<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
    <Grid>

        <Grid.Resources>
            <ResourceDictionary Source="../ResourceDictionary.xaml" />
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="300" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="450"></ColumnDefinition>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="0" Grid.Column="0" Margin="10">
            <Grid>
                <!--<Grid HorizontalAlignment="Left" Width="500">-->

                <Grid.RowDefinitions>
                    <RowDefinition Height="40" />
                    <RowDefinition Height="110" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Canvas x:Name="MyCanvasMarkers" Grid.Row="0" VerticalAlignment="Top" Grid.Column="0" />
                <!-- this will always be the widest of the canvas's-->

                <Canvas x:Name="MyCanvasShowEvents" Grid.Row="1" Grid.Column="0" />

                <Canvas x:Name="MyCanvasFailEvents" Grid.Row="1" Grid.Column="0" />
            </Grid>
        </ScrollViewer>

        <!-- I doubt anything below this is useful for this post but I keep it in case I'm wrong-->

        <Grid x:Name="ConfigurationGrid" Grid.Column="1" Grid.Row="0">

            <StackPanel>
                <Expander IsExpanded="True">
                    <Expander.Header>
                        <TextBlock Text="Zoom" />
                    </Expander.Header>
                    <Expander.Content>
                        <Border Style="{StaticResource LightBorder}">
                            <StackPanel>

                                <TextBlock Text="Select Zoom Out Level" />
                                <ComboBox ItemsSource="{Binding ScaleFactorOptions}"
                                          SelectedItem="{Binding SelectedScaleFactor, UpdateSourceTrigger=PropertyChanged}"
                                          HorizontalAlignment="Left"
                                          SelectionChanged="ZoomLevel_SelectionChanged">
                                    <ComboBox.Resources>
                                        <helper:ZoomConverter x:Key="ZoomConverter" />
                                    </ComboBox.Resources>
                                    <ComboBox.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Converter={StaticResource ZoomConverter}}" />
                                        </DataTemplate>
                                    </ComboBox.ItemTemplate>
                                </ComboBox>
                            </StackPanel>
                        </Border>
                    </Expander.Content>
                </Expander>

                <Expander IsExpanded="True">
                    <Expander.Header>
                        <TextBlock Text="Time Period" />
                    </Expander.Header>
                    <Expander.Content>
                        <Border Style="{StaticResource LightBorder}">
                            <StackPanel>
                                <TextBlock Text="Change Time Period" />
                                <ComboBox ItemsSource="{Binding PeriodOptions}"
                                          SelectedItem="{Binding SelectedPeriod, UpdateSourceTrigger=PropertyChanged}"
                                          HorizontalAlignment="Left"
                                          SelectionChanged="TimePeriod_SelectionChanged">
                                </ComboBox>
                            </StackPanel>
                        </Border>
                    </Expander.Content>
                </Expander>

                <Expander IsExpanded="True">
                    <Expander.Header>
                        <TextBlock Text="Properties" />
                    </Expander.Header>
                    <Expander.Content>
                        <Border Style="{StaticResource LightBorder}">
                            <StackPanel>
                                <TextBlock x:Name="txtProperty" />
                            </StackPanel>
                        </Border>
                    </Expander.Content>
                </Expander>
            </StackPanel>
        </Grid>
    </Grid>
</ScrollViewer>

就像亚当说的那样，你的控件是自动大小的，所以它不知道 ScrollViewer 应该滚动到的“MaxWidth”是多少，这就是它被禁用的原因。

更新 1：由于您在外部有更多控件，因此您希望 ScrollViewer 在外部，以便它定义整个滚动区域。Grid 决定了内部滚动查看器的滚动区域及其自动大小，因此它不知道。将 ScrollViewer 包裹在外部将知道其整体滚动区域，因此 ScrollViewer 内部也将按您预期的方式运行。

于 2013-11-06T15:41:42.373 回答
0

您可以将网格的宽度属性绑定到画布的宽度属性

例如在网格中：

Width="{Binding ElementName=youcanvas, Path=Width}"
于 2013-11-06T15:06:54.287 回答
0

就像现在一样，您拥有所有控件自动调整大小以适应其内容，这违背了ScrollViewer. 相反，去掉Grid并设置HorizontalAlignment到（或手动为其分配大小）ScrollViewer。Stretch

于 2013-11-06T15:04:21.627 回答