ItemsControl внутри существующего Canvas

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

1) На моей странице есть элемент управления холстом с масштабируемым и панорамируемым фоновым изображением. Это работает нормально с тем, что у меня есть. 2) Отобразите набор элементов управления на холсте. Предполагается, что это будет похоже на то, как главная страница 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).

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

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

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


person ZombieSheep    schedule 14.11.2011    source источник


Ответы (1)


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

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

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

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

person Kent Boogaart    schedule 14.11.2011
comment
Это то, что я пробовал (упрощение холста внутри ItemsPanelTemplate), но тогда я не мог ссылаться на него из своего кода. Попробую еще раз - может ошибся... - person ZombieSheep; 14.11.2011
comment
Хорошо, забудьте об этом - вы не сможете легко сослаться на него, потому что он сгенерирован ItemsPanelTemplate. Вам нужно будет использовать что-то вроде VisualTreeHelper, чтобы добраться до него. Как насчет вашей основной проблемы? Это обязательный вопрос? - person Kent Boogaart; 14.11.2011
comment
Я ничего не вижу в окне вывода, а другие свойства связываются, как и ожидалось, в самом элементе управления. - person ZombieSheep; 14.11.2011
comment
Я только что добавил еще один текстовый блок для вывода TopPosition и LeftPosition внутри шаблона элемента, и они нормально привязываются, хотя, по общему признанию, они преобразуются в строки для отображения. В модели они двойники. - person ZombieSheep; 14.11.2011
comment
Попробуйте изменить стиль ItemsControl на ListBox, а стиль ContentPresenter на стиль ListBoxItem, просто для теста. Если это работает, я думаю, вам нужно использовать ItemsControl, который размещает свои элементы внутри экземпляров ContentControl вместо ContentPresenters. - person Kent Boogaart; 14.11.2011
comment
Спасибо, Кент, к сожалению, это не имело никакого значения. В конце концов я схитрил, так как это только для проверки концепции приложения, и эта функциональность была приятной. Тем не менее, вопрос о том, как это сделать, все еще витает в воздухе, если у кого-то есть еще предложения. :) - person ZombieSheep; 08.12.2011