Разработка пользовательского элемента управления для редактирования, похожего на поле «Кому» в стиле hotmail - PullRequest
Новая
       9

Разработка пользовательского элемента управления для редактирования, похожего на поле «Кому» в стиле hotmail

2 голосов
/ 01 апреля 2012

Я настраиваю пользовательский элемент управления для использования в моем приложении, которое имитирует текстовое поле «Кому» в стиле горячей почты, которое позволяет пользователю вводить строки, разделенные точкой с запятой. Элемент управления ведет себя как текстовое поле, при каждом нажатии или вводе точки с запятой создается поле (текстовый блок), содержащий введенный текст, которым можно манипулировать индивидуально.

Элемент управления реализован с помощью представления списка с его ItemPresenter, установленным в WrapPanel

XAML выглядит следующим образом: 

<ListView x:Name="col" ItemContainerStyle="{StaticResource ContainerStyle}">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <local:MyWrapPanel Orientation="Horizontal" MinWidth="400"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>

<Style TargetType="{x:Type ListViewItem}" x:Key="ContainerStyle">
            <Setter Property="ContentTemplate" Value="{StaticResource BoxView}" />
<Style.Triggers>
 <Trigger Property="Tag" Value="Edit">
      <Setter Property="ContentTemplate" Value="{StaticResource BoxViewEdit}" />
 </Trigger>
</Style.Triggers>
</Style>

Шаблон управления для элементов списка (блоков) выглядит следующим образом: 

      <DataTemplate x:Key="BoxView">
       <Border BorderThickness="1" BorderBrush="Brown" Background="Beige" Margin="1,1,1,0" CornerRadius="6" >
            <StackPanel Orientation="Horizontal">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock  Grid.Column="0" Grid.Row="0" Margin="5,5,5,0" Height="20" Text="{Binding XPath=''}"/>
                    <DockPanel  Grid.Column="1" Grid.Row="0">
                        <Image Source="edit8.png" MouseLeftButtonUp="edit_MouseLeftButtonUp" ToolTip="Edit" Margin=" 10,0,0,0"></Image>
                        <Image Source="cancel8.png" MouseLeftButtonUp ="cancel_MouseLeftButtonUp" ToolTip="Remove" Margin=" 5,0,5,0"></Image>
                    </DockPanel>
                </Grid>
            </StackPanel>
        </Border>
    </DataTemplate>

На самом деле просмотр списка - это данные, привязанные к набору xmlnodes, имеющих общего родителя. Внешний вид элемента управления должен быть таким, чтобы он выглядел как текстовое поле. Теперь у меня есть элементы списка, связанные с узлами xml документа xml, чтобы показать текстовое поле, я добавляю пустой xmlnode в документ и изменяю шаблон элемента управления corespponding listviewitem, чтобы он отображался в виде текстового поля. При нажатии клавиши ввода в текстовом поле новый узел xml добавляется к базовому xml во второй последней позиции, содержащей innertext, установленный для текста текстового поля (последняя позиция - фиктивный узел)

Шаблон, используемый для текстового поля: 

<DataTemplate x:Key="BoxViewEdit">
  <TextBox  Margin="0,5,5,0" Background="White" MaxWidth="400" BorderThickness="1" Text="{Binding XPath=''}"/>
</DataTemplate>

Но идея добавить пустой фиктивный xml-узел в базовый исходный xml, чтобы я мог смоделировать редактирование просмотра списка, кажется нелепой. Есть ли более чистый способ сделать это.

То, что я хочу - это обернуть текстовое поле, как показано на рисунке, содержимым обертки без проблем, не добавляя его в саму обертку посредством создания фиктивного узла xmlno.

1 Ответ

0 голосов
/ 12 июля 2012

У меня была такая же проблема, и я нашел несколько решений;Вы можете проверить ответы и комментарии здесь .

...