Multidesk.be » Forums » .Net » XAML block-layout maken

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Ezio op vrijdag 8 januari 2016 om 13:24:27.
Ezio's avatar
Multiviteit: 973
Hey,

Bij wijze van oefening heb ik een Windows Universal App gemaakt die beschikbare parkings in Gent visualiseert. Voor elke parking maak ik een nieuwe usercontrol ctlParking aan en voeg ik hem toe aan het grid op mijn MainPage.

MainPage XAML:
CODE
  1. <Page
  2.     x:Class="ParkingApp.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:ParkingApp"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d" Loaded="Page_Loaded">
  9.  
  10.     <Grid x:Name="grdParking" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,-383,-992">
  11.         <Grid.Resources>
  12.             <Style
  13.         TargetType="GridViewItem">
  14.                 <Setter
  15.             Property="HorizontalAlignment"
  16.             Value="Left" />
  17.                 <Setter
  18.             Property="VerticalAlignment"
  19.             Value="Center" />
  20.             </Style>
  21.         </Grid.Resources>
  22.        
  23.         <ScrollViewer HorizontalAlignment="Left" Height="1612" Margin="10,10,0,0" VerticalAlignment="Top" Width="723" Grid.RowSpan="2">
  24.             <StackPanel x:Name="stack" HorizontalAlignment="Left" Height="1578.634" Margin="9.727,10,0,0" VerticalAlignment="Top" Width="641" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Grid.RowSpan="2">
  25.             </StackPanel>
  26.         </ScrollViewer>
  27.  
  28.        
  29.     </Grid>
  30. </Page>
  31.  


Usercontrol:
CODE
  1.  
  2. <UserControl
  3.     x:Class="ParkingApp.Controls.ctlParking"
  4.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6.     xmlns:local="using:ParkingApp.Controls"
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9.     mc:Ignorable="d">
  10.  
  11.  
  12.     <UserControl.Resources>
  13.         <Style TargetType="Grid" x:Key="grid">
  14.             <Setter Property="Background" Value="Green"></Setter>
  15.         </Style>
  16.         <Style TargetType="TextBlock" x:Key="txbP">
  17.             <Setter Property="FontSize" Value="50"></Setter>
  18.             <Setter Property="Foreground" Value="White"></Setter>
  19.             <Setter Property="TextAlignment" Value="Center"></Setter>
  20.             <Setter Property="Width" Value="150"></Setter>
  21.             <Setter Property="Height" Value="50"></Setter>
  22.         </Style>
  23.         <Style TargetType="TextBlock" x:Key="txbInfo" BasedOn="{StaticResource txbP}">
  24.             <Setter Property="FontSize" Value="16"></Setter>
  25.         </Style>
  26.     </UserControl.Resources>
  27.    
  28.     <Grid Margin="0,0,10.333,9.667" Style="{StaticResource grid}">
  29.         <Grid.RowDefinitions>
  30.             <RowDefinition Height="3*"/>
  31.             <RowDefinition/>
  32.             <RowDefinition/>
  33.         </Grid.RowDefinitions>
  34.         <TextBlock Grid.Column="1" x:Name="txbP" HorizontalAlignment="Left" TextWrapping="Wrap" Text="P" VerticalAlignment="Top" Style="{StaticResource txbP}" Margin="0,0,-10,0"/>
  35.         <TextBlock x:Name="txbName" Text="Textblock" Margin="-10,5.667,0,0.333" Grid.RowSpan="2" Style="{StaticResource txbInfo}" Grid.Row="1" />
  36.         <TextBlock x:Name="txbStatus" Margin="-10,27.667,0,-21.667" Grid.Row="1" Text="TextBlock" Style="{StaticResource txbInfo}" Grid.RowSpan="2"/>
  37.  
  38.     </Grid>
  39. </UserControl>
  40.  
  41.  


Het resultaat is als volgt:

http://i67.tinypic.com/2a5g6k2.png


Maar buiten het feit dat mijn scrollbar niet werkt, had ik de layout graag als volgt gehad:

http://i65.tinypic.com/2m2zz8o.png


Ik heb voor het gemak ook even mijn projectje bijgesloten: http://1drv.ms/1n7CEs4

Bedankt!
I'm a gamer because I don't have a life... I've chosen to have many
^ Reactie #1 geschreven door thekid op vrijdag 8 januari 2016 om 15:46:00.
thekid's avatar
Multiviteit: 5273
Moderator
Hey Ezio, zit daar tijdsdruk achter?

Ik kan ergens in het weekend wel eens kijken (zondag ofzo), maar niet eerder :s

Als tip kan ik misschien meegeven:
- ObservableCollection<T>
- ViewModel gebruiken (POCO klasse die geladen wordt)
- ItemsControl gebruiken met WrapControl template (dit zou de blokken moeten herstellen, en de itemscontrol zou voor je scrollbar moeten zorgen)

Je project heb ik nog niet geopend, dus ik weet niet in hoeverre je dit al doet, maar dan kijk ik het in het weekend wel eens na

Wat links om na te kijken:

http://stackoverflow.com/questions/3131919/wrappanel-as-itempanel-for-itemscontrol
http://stackoverflow.com/questions/14803803/horizontal-orientated-wrappanel-within-itemscontrol-lists-vertically
http://stackoverflow.com/questions/26606791/itemscontrol-of-usercontrols-with-viewmodels
Deze tekst werd het laatst bewerkt voor 23.63 % door thekid op vrijdag 8 januari 2016 om 15:48:57.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door Ezio op vrijdag 8 januari 2016 om 16:02:21.
Ezio's avatar
Multiviteit: 973
Zit nog maar aan het begin van mijn cursus, verderop in de cursus schakelen we over naar MVVM,
dus daar ga ik dan met ViewModels werken. Ik laat je weten als ik aan dat stuk zit en als mijn vraag
daarmee is opgelost. Bedankt voor de tips en linkjes!

In principe ben ik nu zelfs aan een stuk gekomen waar we UserControls achterwege laten en
DataTemplates gaan gebruiken, waardoor deze vraag minder relevant is geworden. Maar
ik laat je weten hoe het gaat ^^
Deze tekst werd het laatst bewerkt voor 30.54 % door Ezio op vrijdag 8 januari 2016 om 16:07:05.
I'm a gamer because I don't have a life... I've chosen to have many
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen