ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Перекрыть уголок ItemsControl.Item
4 сообщений из 4, страница 1 из 1
Перекрыть уголок ItemsControl.Item
    #39688802
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vb_sub
Участник
Всем привет, хочу сделать чтобы элемент в ItemsControl выглядел бы как на картинке (редактированный нижний уголок).

Нарисовал его
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
    <Grid>
        <Polygon  
    Points="10,400,350,150,350,400"  
    Stroke="Red"   
    StrokeThickness="2"/>
        <Line X1="60" Y1="400" X2="350" Y2="190"  Stroke="Red"  />
        <Line X1="120" Y1="400" X2="350" Y2="230"  Stroke="Red" />
        <Line X1="180" Y1="400" X2="350" Y2="270"  Stroke="Red" />
        <Line X1="240" Y1="400" X2="350" Y2="310"  Stroke="Red" />
    </Grid>


Проблема в том, что никак не могу нормально усадить этот треугольник на уголок.

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
         <!--Общий грид-->
			<Grid >
                             
                            <!--Грид для Item-->
                        <Grid >
                         /////
                        </Grid>

                            <!--Грид для уголка-->
                            <Grid>
                                
                                <!--<Canvas Width="100" Height="100" >-->
                                <Polygon     Stretch="UniformToFill" 
                                 Points="10,400,350,150,350,400"    Stroke="Red"     StrokeThickness="2"/>                                
                                <Line X1="60"  Y1="400" X2="350" Y2="190"  Stroke="Red"   />
                                <Line X1="120" Y1="400" X2="350" Y2="230"  Stroke="Red"  />
                                <Line X1="180" Y1="400" X2="350" Y2="270"  Stroke="Red"   />
                                <Line X1="240" Y1="400" X2="350" Y2="310"  Stroke="Red"   />
          
                                <!--</Canvas>-->
                           </Grid>
                                                        
                        </Grid>


в таком варианте высота элемента ItemSControl растягивается во всю высоту треугольника.
Если пытаюсь применить свойство Stretch в различных вариантах для Polygon или Line, то тогда линии пропадают, съезжают.
Заворачиваю в Canvas- вообще треугольник пропадает
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
     <Canvas Panel.ZIndex="999">
                                
                                <!--<Canvas Width="100" Height="100" >-->
                                <Polygon    
                                 Points="10,400,350,150,350,400"    Stroke="Red"     StrokeThickness="2"/>
                                
                                <Line X1="60" Y1="400" X2="350" Y2="190"  Stroke="Red"   />
                                <Line X1="120" Y1="400" X2="350" Y2="230"  Stroke="Red"  />
                                <Line X1="180" Y1="400" X2="350" Y2="270"  Stroke="Red"   />
                                <Line X1="240" Y1="400" X2="350" Y2="310"  Stroke="Red"   />
          
                                <!--</Canvas>-->
                           </Canvas>



ViewBox тоже не помогает

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
                            <Viewbox Stretch="Uniform"  Panel.ZIndex="999">
                                <Canvas >
                                <!--<Canvas Width="100" Height="100" >-->
                                <Polygon    
                                 Points="10,400,350,150,350,400"    Stroke="Red"     StrokeThickness="2"/>
                                
                                <Line X1="60" Y1="400" X2="350" Y2="190"  Stroke="Red"   />
                                <Line X1="120" Y1="400" X2="350" Y2="230"  Stroke="Red"  />
                                <Line X1="180" Y1="400" X2="350" Y2="270"  Stroke="Red"   />
                                <Line X1="240" Y1="400" X2="350" Y2="310"  Stroke="Red"   />
          
                                <!--</Canvas>-->
                           </Canvas>
                            </Viewbox>



Можно ли как-то обойтись без абсолютных размеров, чтобы уголок был автоподстраиваемым по размерам?
...
Рейтинг: 0 / 0
16.08.2018, 13:29
| Ответить | Цитировать | Написать  
Перекрыть уголок ItemsControl.Item
    #39688848
Roman Mejtes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Roman Mejtes
Участник
Сделайте Shape на базе PathGeometry, разместите его в углу, всё. Размер будет определяться тем, как вы его разместите.
...
Рейтинг: 0 / 0
16.08.2018, 14:05
| Ответить | Цитировать | Написать  
Перекрыть уголок ItemsControl.Item
    #39688964
Roman Mejtes
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Roman Mejtes
Участник
1 вариант относительный, по высоте или ширине
2 вариант фиксированный
в качестве Shape использован Path, но если это какой то функциональный элемент управления, я бы обернул в Shape, имеет смысл так же задать цвет прозрачный, иначе HitTest'ы будут работать только если жать на красные линии, а не то, что они окружают
Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
<Window x:Class="WpfApp8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <PathGeometry x:Key="MyPolygon" Figures="M 10,400 350,150 350,400Z M 60,400 350,190  M 120,400 350,230 M 180,400 350,270 M 240,400 350,310"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderThickness="1" BorderBrush="LightGray" Margin="5">
            <Path HorizontalAlignment="Right" VerticalAlignment="Bottom" Stretch="Uniform" Data="{StaticResource MyPolygon}" Stroke="Red" StrokeThickness="1"/>
        </Border>
        <Border Grid.Row="1" BorderThickness="1" BorderBrush="LightGray" Margin="5">
            <Path HorizontalAlignment="Right" VerticalAlignment="Bottom" Stretch="Uniform" Data="{StaticResource MyPolygon}" Stroke="Red" StrokeThickness="1"
                  Width="50"/>
        </Border>
    </Grid>
</Window>
...
Рейтинг: 0 / 0
16.08.2018, 15:58
| Ответить | Цитировать | Написать  
Перекрыть уголок ItemsControl.Item
    #39689300
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vb_sub
Участник
Roman Mejtes,
Внутри ItemsControl MyPolygon берет столько высоты, сколько ему нужно, ввиду того, что высота внутри ItemsControl-бесконечная.

Код: xml
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
   <Grid>
        <Grid.Resources>

            <x:Array x:Key="stringData" Type="{x:Type sys:String}">
                <sys:String>Item1</sys:String>
                <sys:String>Item2</sys:String>
                <sys:String>Item3</sys:String>
                <sys:String>Item4</sys:String>
                <sys:String>Item5</sys:String>
            </x:Array>
        </Grid.Resources>

        <ItemsControl ItemsSource="{StaticResource stringData}"  HorizontalAlignment="Center" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Grid.Row="0" BorderThickness="1" BorderBrush="Green" Margin="5">
                        <Grid >
                            <TextBlock x:Name="MaxHeightTextblock" Text="{Binding }" Background="Aqua"/>
                            <Path HorizontalAlignment="Right" 
                                  VerticalAlignment="Bottom"
                                  Stretch="Uniform" 
                                  MaxHeight="{Binding ActualHeight ,ElementName=MaxHeightTextblock}"
                                  Data="{StaticResource MyPolygon}" Stroke="Red" StrokeThickness="1"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>



Помогает ограничение высоты элемента ItemsControl (MaxHeight), но лучше было бы привязаться к высоте соседнего элемента TextBlock.
Код: xml
1.
   MaxHeight="{Binding ActualHeight ,ElementName=MaxHeightTextblock}"


Но это работать не будет, потому что видимо нужно на этапе Measure искать размер MaxHeightTextblock и для уголка указывать его высоту.
Как происходит обертка в Shape?
...
Рейтинг: 0 / 0
17.08.2018, 10:30
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Перекрыть уголок ItemsControl.Item
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]