I'd like to add a border around elements in my WPF UniformGrid. What I've tried:
<Window.Resources>
<DataTemplate x:Key="GridCell">
<Border BorderBrush="DarkGray" BorderThickness="5"></Border>
</DataTemplate>
</Window.Resources>
...and...
<UniformGrid Name="grid">
<ItemsControl ItemTemplate="{StaticResource GridCell}"></ItemsControl>
</UniformGrid>
It doesn't work (no border appears). I'd like to have each child of the UniformGrid (buttons which are created programmatically, so they don't appear here) to have a border. It needs to look like, well, a grid... with horizontal and vertical gridlines delineating rows and columns.
<Grid>
<ItemsControl ItemsSource="{Binding NumericalPatches}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="7" Columns="7"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DimGray" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Red}" FontSize="14" Foreground="Red"/>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Green}" FontSize="14" Foreground="Green"/>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Text="{Binding StringFormat=F4,Path=Blue}" FontSize="14" Foreground="Blue"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding StringFormat=F4,Path=Chroma}" FontSize="14" Foreground="White"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Related
I'd like to put a grid into the first item of my listbox, i dont just need a setter to change property but an entire grid (need add a headband with button and text).
I've serached a while...
I tried to put two listbox and "combine it" but it is not clean and it's make the ui bad.
<ListBox Style="{DynamicResource MaterialDesignListBox}"
x:Name="first" Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.Row="1" BorderThickness="0" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding FirstLesson}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
<ListBox Style="{DynamicResource MaterialDesignListBox}"
Visibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0"
x:Name="LessonList" MouseDoubleClick="LessonList_MouseDoubleClick"
Background="{StaticResource Secondary}" ItemsSource="{Binding lessonss}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- <Border Margin="10" Height="160" BorderBrush="DodgerBlue" BorderThickness="1"> -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="249*"></RowDefinition>
<RowDefinition Height="22*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition Height="25*"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Source="{Binding thumbnail}" Grid.Row="0" RenderOptions.BitmapScalingMode="HighQuality"></Image>
<Viewbox Grid.Row="2">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding title}"/>
</Viewbox>
<Viewbox Grid.Row="3">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource Txt}" Text="{Binding style}"/>
</Viewbox>
</Grid>
<!-- </Border> -->
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
I tried to make a grid inside the grid and make it visible only on first item but the grid is not detected because the grid is to "deep".
I've found this post : How to have first item bolded in ListBox?
But i dont think it is usefull because grid isn't a property.
I don't know what to try now.
Thanks !
I've been trying to create control dynamically and so far it is working. But my problem is the layout
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120*"/>
<RowDefinition Height="120*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
With the xaml above. this is the screenshot of the layout
and if i use a xaml like this
<Grid Grid.Row="2" >
<ItemsControl IsTabStop="False" ItemsSource="{Binding ListControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Width="100" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
But my goal is i want the textbox to expand if the program is maximized.
How can i adjust the xaml code in order to expand the textbox? Thank you
Directly use Grid instead of StackPanel also remove Width="100".
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="AN:" Margin="5,5,5,5" FontSize="14" VerticalContentAlignment="Center"/>
<TextBox Grid.Column="1" FontSize="14" VerticalContentAlignment="Center" Margin="5,5,5,5"/>
</Grid>
How to make a listview horizontally scrollable inside another listview? The parent listview is verticaly scrollable.
This is the xaml part
<ListView Visibility="Visible" Loaded="feedList_Loaded" ShowsScrollingPlaceholders="True" ItemContainerStyle="{StaticResource ModifiedListViewItemContainerStyle}" IsItemClickEnabled="True" x:Name="feedList" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,10,0,0">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<ReorderThemeTransition/>
<RepositionThemeTransition/>
</TransitionCollection>
</ListView.ItemContainerTransitions>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel HorizontalAlignment="Stretch" Margin="0,0,0,60 ">
</ItemsStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<!--<Border Margin="10,0,10,10" BorderThickness="0,0,0,0" BorderBrush="{StaticResource foreGround}" >-->
<Grid x:Name="feedItemGrid" Width="{Binding ActualWidth, ElementName=feedPivot}" Background="{StaticResource LightBG2}" Margin="0,0,0,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
.................
........
........
<ListView ShowsScrollingPlaceholders="True" ScrollViewer.HorizontalScrollMode="Enabled" ItemsSource="{Binding attachments.data}" HorizontalAlignment="Stretch" Visibility="{Binding type, ConverterParameter=photo, Converter={StaticResource mediaVisibility}}" Grid.Row="4" Grid.ColumnSpan="3">
<ListView.Items>
<ItemsPanelTemplate>
<Hub Height="350" HorizontalAlignment="Stretch" Orientation="Horizontal"></Hub>
</ItemsPanelTemplate>
</ListView.Items>
<ListView.ItemTemplate>
<DataTemplate>
<HubSection VerticalAlignment="Top">
<DataTemplate>
<Button x:Name="postImageButton" Style="{StaticResource GridButton}" VerticalAlignment="Stretch" BorderThickness="0" >
<Grid>
<Image x:Name="image1" Source="{Binding media.image.src}" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Button>
</DataTemplate>
</HubSection>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
.............
............
I've tried putting stackpanel, pivot, hub inside the child listview, but nothing works.
I have page that is using the "Split Page" template and I want it to animate the details whenever a different item is selected in the ListView
My XAML
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Column="1"
Padding="60,0,66,0"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.ZoomMode="Disabled" Grid.Row="1">
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</ScrollViewer>
From reading Quickstart: Animating your UI using library animations (Windows Runtime apps using C#/VB/C++ and XAML) I should be able to get my desired effect by adding
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
Though it does not have the desired effect. Can qnyone tell me why and how to achieve the desired effect?
Changing it to this has the desired effect
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ContentControl x:Name="itemDetail" Content="{Binding SelectedItem, ElementName=itemListView}" Grid.Row="1" Grid.Column="1" >
<ContentControl.ContentTemplate>
<DataTemplate>
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ContentControl.ContentTemplate>
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition HorizontalOffset="100"/>
</TransitionCollection>
</ContentControl.ContentTransitions>
</ContentControl>
<DataTemplate x:Key="tmpGrdProducts">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="6" Width="200" Height="200" Grid.Column="0" Grid.Row="0"></Image>
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="1" Text="{Binding ProductName}" Foreground="Red"></TextBlock>
<!-- Labels-->
<TextBlock Text="SKU" Foreground="Red" Grid.Column="1" Grid.Row="1"></TextBlock>
<TextBlock Text="Code" Foreground="Red" Grid.Column="1" Grid.Row="2"></TextBlock>
<TextBlock Text="Mark" Foreground="Red" Grid.Column="1" Grid.Row="3"></TextBlock>
<TextBlock Text="Model" Foreground="Red" Grid.Column="1" Grid.Row="4"></TextBlock>
<!-- Data-->
<TextBlock Text="{Binding SKU}" Foreground="Black" Grid.Column="1" Grid.Row="1"></TextBlock>
<TextBlock Text="{Binding ProductCode}" Foreground="Black" Grid.Column="1" Grid.Row="2"></TextBlock>
<TextBlock Text="{Binding Mark}" Foreground="Black" Grid.Column="1" Grid.Row="3"></TextBlock>
<TextBlock Text="{Binding Model}" Foreground="Black" Grid.Column="1" Grid.Row="4"></TextBlock>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="grdProduct" DataContext="Binding">
<ItemsControl>
<ItemsControl ItemTemplate="{StaticResource tmpGrdProducts}"></ItemsControl>
</ItemsControl>
</Grid>
source code
var Products = from t in bsEntity.ProductsTemps select t;
grdProduct.DataContext = Products;
Thank you.
You need to bind the ItemsSource property of your ItemsControl to the collection.
Also inside your items control, you've declared an extra items control with the item template.
What you're looking for is something like:
<ItemsControl ItemsSource="{Binding Path=YourCollectionProperty}">
<ItemsControl.ItemTemplate>
<!--your data template here-->
</ItemsControl.ItemTemplate>
</ItemsControl>
Also, I don't think you want DataContext="Binding" on your grid. If at all you'll probably need DataContext="{Binding}"