I have a UserControl, empty StackPanel like following.
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow"/>
</Grid>
Main window's XAML is like following.
<ScrollViewer Grid.Row="2" Grid.Column="0" Background="Gray">
<StackPanel x:Name="holderpanel" Orientation="Vertical"/>
</ScrollViewer>
I want to put datawrapper into holderpanel from the Main Window's code behind programmatically.
If there's control in the datawrapper, dadawrapper is inserted into holder panel.
However, in case of empty StackPanel, never inserted.
How to do this?
To help you clarify your question, I'll provide an example of exactly what you asked for:
<Grid>
<ScrollViewer Grid.Row="2" Grid.Column="0" Background="Gray">
<StackPanel x:Name="holderpanel" Orientation="Vertical"/>
</ScrollViewer>
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow">
<TextBlock Text="Test"/>
</StackPanel>
</Grid>
</Grid>
codebehind (for this example, I added to Loaded event handler, but it could be used elsewhere):
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
if (datawrapper.Children.Count > 0)
{
var grid = datawrapper.Parent as Grid;
grid.Children.Remove(datawrapper);
holderpanel.Children.Add(datawrapper);
}
}
The datawrapper should be separated user control and empty like following.
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow"/>
</Grid>
I will add another user controls into the datawrapper horizontally 5 later. That user control is like following.
<UserControl x:Class="WpfTest.ResultItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfTest"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="resultitem">
<Border CornerRadius="5" BorderBrush="#e0e0e0" Background="White" BorderThickness="2" DockPanel.Dock="Top" Margin="10 10 10 15">
<Grid Margin="0 30 0 30" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Chart#" Width="Auto" Height="30" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Patient Name" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Home Phone#" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Cell Phone#" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0" Text="Patient Type" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
</Grid>
</Border>
</Grid>
If the datawrapper is filled with 5 ResultItems, datawrapper will added into the holderpanel vertically.
Related
I am trying to create a grid in XAML by the following:
GRID Type
I tried something like this but I have no ideea how to add the red squares.
Do I have to make a grid in grid?
Right now, I have this code
<Window x:Class="MonitorComenzi.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"
xmlns:local="clr-namespace:MonitorComenzi"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
</Grid>
</Window>
You can make nested Grids, its absolutly fine, but a single StackPanel do the trick as well. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="10"
Grid.Row="1"
Grid.Column="0">
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
</StackPanel>
</Grid>
I have created a application for windows 10 (uwp) devices. I´m using the windows appstudio "designer". Now, I have to update the source code by a combobox and the correct eventhandler.
The combobox items contains different urls. After the selection changed, I have to parse entries from a url.
Layout-file:
<Page
x:Class="App.Pages.NeuigkeitenListPage"
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"
xmlns:was_actions="using:AppStudio.Uwp.Actions"
xmlns:was_commands="using:AppStudio.Uwp.Commands"
xmlns:was_controls="using:AppStudio.Uwp.Controls"
xmlns:list_layouts="using:Wallfahrtsapp.Layouts.List"
xmlns:controls="App.Layouts.Controls"
xmlns:vm="using:App.ViewModels"
xmlns:triggers="using:App.Triggers"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DataContext="{d:DesignData Source=/Assets/Design/DesignData.json, Type=vm:DesignViewModel, IsDesignTimeCreatable=true}"
mc:Ignorable="d">
<Page.Resources>
<was_controls:VisualBreakpoints x:Name="ResponsiveBehaviorsVBP" ConfigFile="/Assets/ResponsiveBehaviorsVBP.json"></was_controls:VisualBreakpoints>
</Page.Resources>
<Grid Background="{StaticResource AppBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Background="{StaticResource AppBarBackground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="48"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="{Binding Active.pageTitleMargin, Source={StaticResource ResponsiveBehaviorsVBP}}" Text="{x:Bind ViewModel.PageTitle}" Foreground="{StaticResource AppBarForeground}" FontSize="{StaticResource AppTitleTextSizeDefault}" VerticalAlignment="Center" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" MaxLines="1"/>
<was_actions:ActionsCommandBar
x:Name="appBar"
ActionsSource="{x:Bind ViewModel.Actions}" Style="{StaticResource WasCommandBarStyle}"
Foreground="{StaticResource AppBarForeground}"
IsVisible="{x:Bind ViewModel.HasActions}"
Background="{StaticResource AppBarBackground}"
Grid.Row="{Binding Active.appBarRow, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.Column="{Binding Active.appBarColumn, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.ColumnSpan="{Binding Active.appBarColumnSpan, Source={StaticResource ResponsiveBehaviorsVBP}}" Opened="appBar_Opened">
</was_actions:ActionsCommandBar>
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="3"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ProgressBar Grid.Row="1" Height="3" Margin="0,6,0,6" IsIndeterminate="True" Foreground="{StaticResource PageTitleForeground}" Visibility="{x:Bind ViewModel.IsBusy, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed, Mode=OneWay}"/>
<was_controls:ErrorNotificationControl x:Uid="ListErrorNotificationControl" Grid.Row="2" ErrorVisibility="{x:Bind ViewModel.HasLoadDataErrors, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" ErrorColor="{StaticResource PageTitleForeground}" Margin="10,0,18,0"/>
<list_layouts:ListContactCard Grid.Row="1" ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}" ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}" OneRowModeEnabled="False" Margin="31,0,0,3" Grid.RowSpan="3" />
<ListBox></ListBox>
</Grid>
</ScrollViewer>
<TextBlock HorizontalAlignment="Left"
x:Name="source"
TextWrapping="Wrap"
Text="Newsquelle auswählen:"
VerticalAlignment="Top"
FontFamily="Segoe UI"
FontStyle="Oblique"
Padding="40" Margin="384,-30,0,0" Height="78"
/>
<ComboBox x:Name="sourceComboBox"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="200"
SelectionChanged="selectionChanged"
>
<ComboBoxItem Content="Url1"/>
<ComboBoxItem Content="Url2"/>
</ComboBox>
<controls:DataUpdateInformationControl Grid.Row="2" Grid.ColumnSpan="2" LastUpdateDateTime="{x:Bind ViewModel.LastUpdated, Mode=OneWay}" Color="{StaticResource PageTitleForeground}" Margin="8,4,8,4" HorizontalAlignment="Left" HasLocalData="{x:Bind ViewModel.HasLocalData}"/>
</Grid>
C#- file: Eventhandler
private void selectionChanged (object sender , SelectionChangedEventArgs args)
{
index = sourceComboBox.SelectedIndex;
Debug.WriteLine("selectionChangedEventMethod");
newsblogHTTP(index);
}
But how can I update my layout with the new content?
If you need more code snippets let´s see the repo for my project.
layout-file : https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml.cs
C#-Config file:
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Sections/NeuigkeitenConfig.cs
Thanks for your help!
I am trying to create a scrolling list of panels with each one having a different appearance. I have used the variable sized wrap grid but my images don't seem to show correctly on the smaller panels. The items in the grid view are bound to a list of unknown length.
Screenshot of the current layout
Here is the xaml code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<local:MyGridView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="Button_Click" >
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="190" ItemWidth="320" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate >
<DataTemplate x:DataType="data:Article">
<Grid Height="1080" Width="1440" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="{x:Bind image}" Stretch="UniformToFill" />
<StackPanel VerticalAlignment="Top">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity=".75" />
</StackPanel.Background>
<TextBlock FontSize="30" Margin="5" TextWrapping="WrapWholeWords" >
<Run Text="{x:Bind Name}"/>
</TextBlock>
<TextBlock Margin="5" FontSize="15" FontWeight="Thin" TextWrapping="Wrap" TextTrimming="WordEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="19" MaxHeight="38" >
"It is hard to miss the warnings. In the race to make computers more intelligent than us, humanity will summon a demon, bring forth the end of days, and code itself into oblivion. Instead of silicon assistants we'll build silicon assassins. The doomsday story of an evil AI has been told a thousand times. But our fate at the hand of clever cloggs robots may in fact be worse - to summon a class of eternally useless human beings."
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</local:MyGridView>
</Grid>
Ideally I want the layout shown in the xaml code below but I have two further problems:
1) I don't know how to turn this into a template so that I can bind to the list
2) The images in the inner-most grid do not layout according to the *-size proportions that I had set.
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36*"/>
<ColumnDefinition Width="648*"/>
<ColumnDefinition Width="36*"/>
</Grid.ColumnDefinitions>
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<Grid Name="grid1">
<Image Source="/Assets/obama.jpg" VerticalAlignment="Center" Stretch="UniformToFill" Margin="0 5 0 5"/>
<Rectangle Fill="Black" Opacity=".3" />
<TextBlock VerticalAlignment="Center" Text="Obama Is President" TextWrapping="WrapWholeWords" FontSize="133.333" Foreground="White" HorizontalAlignment="Center"/>
</Grid>
<Grid Name="grid2" Margin="20 0 20 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Tag="blah" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}"/>
<Button Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}"/>
<Button Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}" />
<Button Tag="g" Grid.Row="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}" />
</Grid>
<Grid Grid.Column="1" >
<Grid.RowDefinitions>
<RowDefinition Height= "*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="test" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Text_Button}"/>
<Button Content="test" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
<Button Content="test" Grid.Row="4" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5" Template="{StaticResource Medium_Button}"/>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
I know my code is likely quite messy since i am new to xaml and windows development in general but I'd appreciate any solutions.
Update: It's been pointed out that I specified grid dimensions which is causing my problem with the images, removing the grid height and width results in them showing properly. To follow up, is there now a way for the images to now change size depending on the window size (stretch/squish) up to a limit before the wrap effect takes place?
how can I make the scrollviewer resize to the bottom edge of the screen, so as to maximize to resize with the mouse ? The way the code is, when the screen is maximized the scroll bar does not appear and it is not possible to scroll the contents.
My xaml File
<Window x:Class="AppSearch.MainWindow" x:Name="mainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AppSearch" Height="600" Width="820"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded"
StateChanged="mainWindow_StateChanged"
ResizeMode="CanResize"
PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="stkContentLeft"
MinWidth="510"
MinHeight="560"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
LoadCompleted="stkContentLeft_LoadCompleted"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,0,05,0" Grid.Column="0"/>
<StackPanel Grid.Column="1" x:Name="stckContentRight" Width="276"
Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Orientation="Vertical"
HorizontalAlignment="Right">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Height="auto" Grid.Row="0">
<StackPanel x:Name="help" Width="20" Height="20" HorizontalAlignment="Right" Margin="0,5,10,0">
<Image Source="Imagens/help_icon.png"/>
</StackPanel>
<StackPanel x:Name="stkUcSupervisor" Height="50" Width="276" Margin="0,5,0,0" HorizontalAlignment="Center"/>
<TextBox x:Name="txtSearch"
ToolTip="put your key..."
FontSize="13"
Foreground="Black"
BorderThickness="1"
TextWrapping="Wrap"
Margin="0,5,0,05" Width="270" HorizontalAlignment="Center"/>
</StackPanel>
<ScrollViewer x:Name="scroll"
CanContentScroll="True"
IsDeferredScrollingEnabled="False"
UseLayoutRounding="False"
VerticalScrollBarVisibility="Visible"
VerticalAlignment="Top"
BorderThickness="1"
BorderBrush="Gray"
Margin="0,05,0,0"
Grid.Row="1"
Height="455">
<StackPanel x:Name="stkListOfUserControls"
CanVerticallyScroll="True"
Height="455"
OverridesDefaultStyle="False">
<StackPanel.ScrollOwner>
<ScrollViewer AllowDrop="True" />
</StackPanel.ScrollOwner>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
<StackPanel x:Name="stkPopUp"
Canvas.Bottom="0"
Canvas.Left="0"
Height="285"
Width="280"
VerticalAlignment="Bottom"/>
</Grid>
So I have the following DataTemplate for a ListBox.ItemTemplate:
<DataTemplate x:Key="Tweet">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfileImageURL}"
Width="50" Height="50"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
FontSize="15"
FontWeight="Bold"
Text="{Binding User}"/>
<TextBlock
Grid.Row="1" TextWrapping="Wrap"
Text="{Binding Status}"/>
<DockPanel
Grid.Row="2">
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="WrapWithOverflow"
Text="{Binding TimeAgo}" TextAlignment="Justify"/>
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="Wrap"
Text="{Binding Source}"/>
</DockPanel>
</Grid>
</Grid>
</DataTemplate>
The problem is that it doesn't auto-size to the ListBox. The text gets clipped:
TwitBy preview
How to fix it?
Here's the listBox XAML definition:
<ListBox
x:Name="tweetsListBox"
Margin="3,0"
Grid.Row="1"
Background="{x:Null}" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{DynamicResource Tweet}"/>
Any help would be appreciated.
Thanks
Try this:
<DataTemplate x:Key="Tweet">
<Grid Width="{Binding ElementName=tweetsListBox, Path=ActualWidth>">