Блог

Главная - Вопросы по программированию - ItemsControl внутри существующего холста

ItemsControl внутри существующего холста

#c# #xaml #itemscontrol #windows-8

#c# #xaml #itemscontrol #windows-8

Вопрос:

Я пытаюсь выполнить следующее.

1) На моей странице есть элемент управления canvas с масштабируемым фоновым изображением, которое можно перемещать. Это нормально работает с тем, что у меня есть. 2) Отобразить набор элементов управления внутри canvas. Предполагается, что это будет похоже на то, как домашняя страница Bing отображает горячие точки на изображении, показанном там. Элементы управления должны перемещаться по холсту по мере панорамирования / увеличения изображения.

Я попробовал следующее

     <Canvas Name="PanoCanvas" >
        <Canvas.Background>
            <ImageBrush x:Name="PanoImage" ImageSource="/Images/OtherImages/PanoBackound.jpg" Stretch="None" />
        </Canvas.Background>
        <ItemsControl Name="POIPresenter">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <uc:PointOfInterest />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Top" Value="{Binding TopPosition}" />
                    <Setter Property="Canvas.Left" Value="{Binding LeftPosition}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Canvas>

и установите ItemsSource POIPresenter в коде позади, но пользовательские элементы управления отображаются друг над другом слева (на 0,0).

Я попытался переместить объявления canvas внутри ItemsPanelTemplate, но тогда мои объявления для установки масштаба / центра изображения не работают — они не могут найти элемент управления PanoCanvas.

Кто-нибудь может указать на болезненно очевидную вещь, которую я здесь делаю wring, пожалуйста?

Заранее спасибо.

Ответ №1:

Для начала вы можете упростить следующим образом:

 <ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas>
                <Canvas.Background>...</Canvas.Background>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

То есть используйте один Canvas вместо двух.

Кроме этого, ищите ошибки привязки в окне вывода. Возможно, свойства TopPosition и LeftPosition разрешаются некорректно.

Комментарии:

1. Это было то, что я пробовал (упрощение canvas внутри ItemsPanelTemplate), но тогда я не мог ссылаться на это из своего кода. Попробую еще раз — возможно, я сделал это неправильно…

2. Хорошо, забудьте об этом — вы не сможете легко ссылаться на него, потому что он генерируется ItemsPanelTemplate . Вам пришлось бы использовать что-то вроде VisualTreeHelper , чтобы добраться до этого. Как насчет вашей основной проблемы? Является ли это проблемой привязки?

3. Я ничего не вижу в окне вывода, а другие свойства являются обязательными, как и ожидалось, в самом элементе управления.

4. Я только что добавил еще один текстовый блок для вывода TopPosition и LeftPosition внутри шаблона элемента, и они там нормально привязываются, хотя, по общему признанию, они преобразуются в строки для отображения. Они являются двойниками в модели.

5. Попробуйте изменить ItemsControl на ListBox и ContentPresenter стиль на ListBoxItem style, просто для теста. Если это сработает, я думаю, вам нужно использовать ItemsControl, который размещает свои элементы внутри ContentControl экземпляров вместо ContentPresenter s