10

Нужно нарисовать средствами WPF что-то подобное введите сюда описание изображения

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

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

В общем, уважаемые гуру, мне очень нужен ваш совет по поводу того, какие средства использовать в WPF для этих целей.

Подскажите, в каком направлении искать, а я уж постараюсь двигаться самостоятельно. После самостоятельного поиска, который дал не очень много, сформировались такие вопросы:

  1. Какой контрол можно перерисовать в форме вот этих белых и зеленых фигур? Как это собственно делают нормальные люди (контрол кастомной формы)?
  2. как внутрь поместить текст?
  3. как рассчитать количество сообщений, которые помещаются на одну страничку.

И еще одно. У приложения должна быть страничная навигация (если я правильно понимаю смысл этого понятия) Нужна кнопка, которая будет делать переход на следующую страничку и на предыдущую. как когда кликаешь NEXT и открывается следующий слайд.

1
  • "нарисовать средствами WPF ... этих белых и зеленых фигур" -- создать фигуру можно с помощью Path. выводится в контрол Canvas
    – Stack
    3 янв 2016 в 16:39

3 ответа 3

10

Вам не нужен контрол кастомной формы. Вам просто нужно отрисовать облако с хвостиком нужного размера, и наложить текст внутри.

Возьмём исходную картинку и уберём из неё текст:

bubble

Это будет наш фон. Только надо, чтобы он изменял размеры не одинаково. Стандартная идея состоит в выделении нескольких областей:

bubble с областями

Угловые области не должны меняться вовсе, верхняя и нижняя боковые должны растягиваться по горизонтали, левая и правая боковые — по вертикали, а центральная — в обеих направлениях. Раз верхняя и нижняя боковые картинки будут всё равно растягиваться в ширину, можно сделать их шириной в один пиксель, и точно так же левую и правую боковые — высотой в один пиксель. Центральную область можно вовсе сделать 1х1.

Для реализации этого в WPF заведём UserControl:

<UserControl x:Class="ChatInterface.Bubble"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <!-- сетка 3х3 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="11"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="17"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="11"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="11"/>
        </Grid.RowDefinitions>
        <!-- левый верхний уголок -->
        <Image Source="bubbleNW.png" Grid.Row="0" Grid.Column="0"
               RenderOptions.EdgeMode="Aliased" Stretch="None"/>
        <!-- верхняя полоса -->
        <Image Source="bubbleN.png"  Grid.Row="0" Grid.Column="1"
               RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
        <!-- правый верхний уголок -->
        <Image Source="bubbleNE.png" Grid.Row="0" Grid.Column="2"
               RenderOptions.EdgeMode="Aliased" Stretch="None"/>
        <!-- левая полоса -->
        <Image Source="bubbleW.png"  Grid.Row="1" Grid.Column="0"
               RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
        <!-- центр -->
        <Image Source="bubbleC.png"  Grid.Row="1" Grid.Column="1"
               RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
        <!-- и т. д. -->
        <Image Source="bubbleE.png"  Grid.Row="1" Grid.Column="2"
               RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
        <Image Source="bubbleSW.png" Grid.Row="2" Grid.Column="0"
               RenderOptions.EdgeMode="Aliased" Stretch="None"/>
        <Image Source="bubbleS.png"  Grid.Row="2" Grid.Column="1"
               RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
        <Image Source="bubbleSE.png" Grid.Row="2" Grid.Column="2"
               RenderOptions.EdgeMode="Aliased" Stretch="None"/>
    </Grid>
</UserControl>

Теперь, нужно наложить на это текст. Абсолютно правильным путём было бы сделать декоратор с только что созданным контролом в фоне, но для этого нужны продвинутые знания WPF, так что мы пойдём более простым путём: заведём ещё один UserControl. Небольшая хитрость заключается в том, что облако должно быть такого же размера, как и текст, так что придётся использовать Binding, и чтобы Bubble не влиял сам на лэйаут, засунем его, например, в Canvas:

<UserControl x:Class="ChatInterface.BubbleWithText"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ChatInterface"
             Name="root">
    <Grid>
        <Canvas>
            <local:Bubble
                Height="{Binding ActualHeight, ElementName=tb}"
                Width="{Binding ActualWidth, ElementName=tb}"/>
        </Canvas>
        <TextBlock Name="tb" Padding="11" TextWrapping="Wrap"
                   Text="{Binding Text, ElementName=root}"/>
    </Grid>
</UserControl>

В code-behind нужно положить свойство Text:

public partial class BubbleWithText : UserControl
{
    public BubbleWithText()
    {
        InitializeComponent();
    }

    #region dp string Text
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(BubbleWithText));
    #endregion
}

Теперь можно засунуть наши элементы в StackPanel:

<StackPanel Width="150">
    <local:BubbleWithText Text="Я думаю, она дала тебе неправильный номер"/>
    <local:BubbleWithText Text="А может быть и нет, кто их разберёт?"/>
</StackPanel>

и получить следующее:

результат

Разумеется, исходные картинки лучше нарисовать самостоятельно (или потребовать у дизайнера), и ни в коем случае не сохранять в JPEG.


Если вы хотите сделать более правильно, используйте декоратор:

public class BubbleDecorator : Decorator
{
    Bubble bubble = new Bubble();

    public BubbleDecorator()
    {
        bubble.SetBinding(Bubble.WidthProperty, new Binding("ActualWidth")
                                                { Source = this });
        bubble.SetBinding(Bubble.HeightProperty, new Binding("ActualHeight")
                                                 { Source = this });
    }

    protected override Visual GetVisualChild(int index)
    {
        if (Child != null)
        {
            if (index == 0)
                return bubble;
            if (index == 1)
                return Child;
        }
        throw new IndexOutOfRangeException("Wrong child index");
    }

    protected override Size ArrangeOverride(Size arrangeSize)
    {
        bubble.Arrange(new Rect(arrangeSize));
        return base.ArrangeOverride(arrangeSize);
    }

    protected override int VisualChildrenCount { get { return Child == null ? 0 : 2; } }
}

Получаем такой XAML:

<StackPanel Width="150">
    <local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
        <TextBlock Padding="13" TextWrapping="Wrap"
                   Text="Я думаю, она дала тебе неправильный номер"/>
    </local:BubbleDecorator>
    <local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
        <TextBlock Padding="13" TextWrapping="Wrap"
                   Text="А может быть и нет, кто их разберёт?"/>
    </local:BubbleDecorator>
    <local:BubbleDecorator HorizontalAlignment="Right" Margin="2">
        <TextBlock Padding="13" TextWrapping="Wrap"
                   Text="Приффки!!1"/>
    </local:BubbleDecorator>
</StackPanel>

новый результат

22
  • 1
    Э... Для совместного растягивания никакой магии не надо, достаточно положить и пузырь, и текст в один грид (без строк и столбцов). Ну и на отдельный контрол это никак не тянет, тут просится шаблон для какого-нибудь ContentControl. Заодно не будет ограничения на содержимое.
    – Kyubey
    3 янв 2016 в 19:47
  • @Discord: Я пробовал, у меня пузырь хотел растянуться сильнее чем текст (не выяснил, почему, кажется, картинки странно стретчились), и таким образом получались пустые места под текстом.
    – VladD
    3 янв 2016 в 19:48
  • @Discord: Я там написал в ответе, по-правильному нужен декоратор.
    – VladD
    3 янв 2016 в 19:49
  • 1
    @Discord вот ему как раз будет достаточно объявить стиль, в котором и обернуть их все. А вам придется или копировать стиль из файла в файл - или же кидать его в глобальную свалку стилей. 3 янв 2016 в 21:20
  • 1
    @PavelMayorov Теперь вы будете мне рассказывать, что выделять стили в общие ресурсы — это плохо? о_О Вы б на досуге посмотрели, как реализованы стандартные контролы. И как они стилизуются.
    – Kyubey
    3 янв 2016 в 21:25
7

Идею с разрезанием картинки на 9 частей @Vlad разъяснил. Теперь я покажу, как то же самое сделать самым простым способом и в векторе. Отрисовка примитивная, в качестве примера. Обратите внимание на использование исключительно стилей, шаблонов и биндингов к свойствам контрола. Никакого кода в C#, никаких пользовательских контролов, никаких декораторов; на выходе только ContentControl с двумя стилями: для левого и правого пузыря.

<Window x:Class="SoRu479660.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Chat" Height="500" Width="300">
    <Window.Resources>
        <!-- Пузырь -->
        <Style x:Key="Bubble" TargetType="Control">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Control">
                        <Grid SnapsToDevicePixels="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="10"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="10"/>
                            </Grid.RowDefinitions>
                            <Polygon Grid.Row="0" Grid.Column="0" Points="0 10, 10 0, 10 10" Fill="{TemplateBinding Background}"/>
                            <Rectangle Grid.Row="0" Grid.Column="1" Fill="{TemplateBinding Background}"/>
                            <Polygon Grid.Row="0" Grid.Column="2" Points="0 0, 10 10, 0 10" Fill="{TemplateBinding Background}"/>
                            <Rectangle Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}"/>
                            <Polygon Grid.Row="2" Grid.Column="0" Points="0 0, 10 0, 10 10, 8 8, 0 10, 5 5" Fill="{TemplateBinding Background}"/>
                            <Rectangle Grid.Row="2" Grid.Column="1" Fill="{TemplateBinding Background}"/>
                            <Polygon Grid.Row="2" Grid.Column="2" Points="0 0, 10 0, 0 10" Fill="{TemplateBinding Background}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Текст с переносом строк -->
        <Style x:Key="WrapStyle" TargetType="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap"/>
        </Style>
        <!-- Текст в пузыре, левая версия -->
        <Style x:Key="BubbleLeftStyle" TargetType="ContentControl">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Padding" Value="8 5"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Grid Margin="{TemplateBinding Margin}">
                            <Control Style="{StaticResource Bubble}" Background="LimeGreen"/>
                            <ContentPresenter Margin="{TemplateBinding Padding}">
                                <ContentPresenter.Resources>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource WrapStyle}"/>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Текст в пузыре, правая версия -->
        <Style x:Key="BubbleRightStyle" TargetType="ContentControl" BasedOn="{StaticResource BubbleLeftStyle}">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <Grid Margin="{TemplateBinding Margin}">
                            <Control Style="{StaticResource Bubble}" Background="DeepSkyBlue" RenderTransformOrigin=".5 0">
                                <Control.RenderTransform>
                                    <ScaleTransform ScaleX="-1"/>
                                </Control.RenderTransform>
                            </Control>
                            <ContentPresenter Margin="{TemplateBinding Padding}">
                                <ContentPresenter.Resources>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource WrapStyle}"/>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <ContentControl Style="{StaticResource BubbleLeftStyle}"
                Content="Hello world!"/>
        <ContentControl Style="{StaticResource BubbleLeftStyle}"
                Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
        <ContentControl Style="{StaticResource BubbleRightStyle}"
                Content="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
        <ContentControl Style="{StaticResource BubbleRightStyle}"
                Content="Hello world!"/>
        <ContentControl Style="{StaticResource BubbleLeftStyle}"
                Content="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
        <ContentControl Style="{StaticResource BubbleRightStyle}"
                Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
    </StackPanel>
</Window>

Выглядит результат так:

1
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещен в чат.
    – user177221
    4 янв 2016 в 8:53
2

Вот вариант с декоратором на основе решения @VladD (пишу по памяти, возможны опечатки):

<UserControl x:Class="ChatInterface.Bubble"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="11"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="17"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="11"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="11"/>
                </Grid.RowDefinitions>

                <Image Source="bubbleNW.png" Grid.Row="0" Grid.Column="0"
                       RenderOptions.EdgeMode="Aliased" Stretch="None"/>
                <Image Source="bubbleN.png"  Grid.Row="0" Grid.Column="1"
                       RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
                <Image Source="bubbleNE.png" Grid.Row="0" Grid.Column="2"
                       RenderOptions.EdgeMode="Aliased" Stretch="None"/>
                <Image Source="bubbleW.png"  Grid.Row="1" Grid.Column="0"
                       RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
                <Image Source="bubbleC.png"  Grid.Row="1" Grid.Column="1"
                       RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
                <Image Source="bubbleE.png"  Grid.Row="1" Grid.Column="2"
                       RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
                <Image Source="bubbleSW.png" Grid.Row="2" Grid.Column="0"
                       RenderOptions.EdgeMode="Aliased" Stretch="None"/>
                <Image Source="bubbleS.png"  Grid.Row="2" Grid.Column="1"
                       RenderOptions.EdgeMode="Aliased" Stretch="Fill"/>
                <Image Source="bubbleSE.png" Grid.Row="2" Grid.Column="2"
                       RenderOptions.EdgeMode="Aliased" Stretch="None"/>

                <ContentPresenter Grid.Row="1" Grid.Column="1" />
            </Grid>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

Использование:

<local:Bubble>Привет, мир!</local:Bubble>

<local:Bubble>
    <TextBlock TextWrapping="Wrap" Text="Привет, мир!"/>
</local:Bubble>
3
  • У вас по сути урезанная версия моего варианта. :)
    – Kyubey
    3 янв 2016 в 21:16
  • UserControl с темплейтом — интересная техника, не знал.
    – VladD
    3 янв 2016 в 21:36
  • искажений не будет, если у всего UI изменить zoom в + или в - ?
    – Stack
    3 янв 2016 в 23:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.