Difference between revisions of "CSharp:XAML Tips"
From Aino Wiki
(→Controlli) |
(No difference)
|
Latest revision as of 16:23, 5 February 2018
Si elencano Tips che riguardano prevalentemente la parte di Presentazione delle Viste quindi il cuore degli esempi riguarda la parte XAML
Contents
Controlli
Validator e Trasformazioni
Per trasformare il testo in Maiuscolo: CharacterCasing="Upper"
Premesso che i seguenti converter sono funzioni presenti in apposite classi C# richiamate mediante la seguente posta all'inizio dello XAML:
<UserControl x:Class="FOX.Module.NewCustomer.views.RegProfilo" xmlns:BooleanConverter="clr-namespace:FOX.Module.Common.Converters;assembly=FOX.Module.Common" xmlns:VisibilityConverter="clr-namespace:FOX.Module.Common.Converters;assembly=FOX.Module.Common" xmlns:CommonConverter="clr-namespace:FOX.Dashboard.Base.Converters;assembly=FOX.Dashboard.Base" xmlns:CustomerValidators="clr-namespace:FOX.Module.NewCustomer.Validations" xmlns:Validators="clr-namespace:FOX.Module.Common.Validations;assembly=FOX.Module.Common" xmlns:localConverters="clr-namespace:FOX.Module.Common.Converters;assembly=FOX.Module.Common" xmlns:conv="clr-namespace:FOX.Converters;assembly=FOX.Converters" >
Grazie al precedente riferimento (nello stesso XAML), per effettuare conversini, es per non consentire l'inserimento di spazi: Converter="{StaticResource TrimConverter}"
<TextBox Grid.Row="0" Grid.Column="2" x:Name="Nome" Style="{StaticResource txtStandard}" Height="20" Width="178" MaxLength="50" Margin="-5,5,0,0" TabIndex="1" CharacterCasing="Upper"> <TextBox.Text> <Binding Path="FIRSTNAME" UpdateSourceTrigger="PropertyChanged" Mode="TwoWay" Converter="{StaticResource TrimConverter}"> <Binding.ValidationRules> <CustomerValidators:RequiredCustomerValidator Controlname="{l:LocalizeByModule DefaultValue=Nome, Key=lblFirstname}"> <CustomerValidators:RequiredCustomerValidator.CustomerType> <CustomerValidators:CustomerType DataContext="{Binding Source={StaticResource DataContextBridge}, Path=DataContext}" CustomerTypeCode="{Binding IsFirstnameRequired}" /> </CustomerValidators:RequiredCustomerValidator.CustomerType> <CustomerValidators:RequiredCustomerValidator.ValidationParam> <CustomerValidators:Param DataContext="{Binding Source={StaticResource DataContextBridge}, Path=DataContext}" Key="FIRSTNAME" Value="{Binding FIRSTNAME}" /> </CustomerValidators:RequiredCustomerValidator.ValidationParam> </CustomerValidators:RequiredCustomerValidator> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox>
Vari attributi
UpdateSourceTrigger
Leggere: wpf-tutorial
Griglie
Tutti i controlli posson essere racchiusi in una griglia e posizionati con coordiante, attenzione ogni oggetto contenuto potrà usare dei margini per posizionarsi.
I valori delle distanze dei margini ri riferiscono rispettivamente alle distanze dal: Top, Right, Bottom, Left. Così l'attributo Margin="40,5,0,0"
significa distanza 40 da sopra, 5 a destra etc
<Grid Width="auto"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Style="{StaticResource txbTitleH7Bold}" Width="117" Text="{l:LocalizeByModule DefaultValue='Customer Titles', Key=txbTITLES}" Margin="40,0,0,0" /> <!-- etc --> </grid>
ATTENZIONE cosa utile per capire la collocazione degli oggetti in griglia usare la property ShowGridLines
farà mostrare il reticolo in griglia (in WYSWYG).
Ecco un particolare:
<Grid x:Name="layoutRoot" ShowGridLines="True" DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type dashboardBase:FOXModuleBase}}, Path=CurrentEntity, Mode=TwoWay}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- etc -->
TAB
Un buon esempio wpf-tutorial.com
<Grid> <TabControl> <TabItem Header="General"> <Label Content="Content goes here..." /> </TabItem> <TabItem Header="Security" /> <TabItem Header="Details" /> </TabControl> </Grid>
Code behind.
Layout
Dimensionamento dinamico
Contenitori
Ci sono controlli contenitore che si adattano automaticamente al cambiamento di dimensioni dell'oggetto padre ed altri che non lo fanno.
Quelli che non si adattano sono:
- StackPanel
- WrapPanel
- Canvas
- TabControl
Quelli che si adattano:
- Grid
- UniformGrid
- DockPanel
Quindi a tal fine ad esempio è preferibile più usare una Grid che uno StackPanel, tuttavia è anche possibile imporre ad una Grid di non ridimensionarsi automaticamente. Tutto dipende da alcune Properties:
-
Grid.RowDefinition
-
Grid.ColumnDefinition
Dare un'occhiata al segeunte esempio preso da StackOverflow
<Grid> <Grid.RowDefinitions> <!-- Exact Height... won't resize --> <RowDefinition Height="100" /> <!-- Will resize to the size of contents --> <RowDefinition Height="Auto" /> <!-- Will resize taking all remaining space --> <RowDefinition Height="*" /> </Grid.RowDefinitions> </Grid>
Controlli
Ad esempio per far allungare una TextBox in base alla lunghezza dinamica assunta dal contenitore.
Il trucco è NON valorizzare Height e Width ma impostarli in AUTO ed usare la property MARGIN di regolare essa stessa la dimensione. Impostare le proprietà HORIZONTALALIGNMENT e VERTICALALIGNMENT a STRETCH e così la funzionalità di ancoraggio funzionerà.
Vedere il seguente esempio, la TextBox è in una colonna di una griglia la cui definizione di colonna è
ColumnDefinition Width="*"
<TextBox x:Name="TxtSourcePath" Grid.Column="1" Grid.Row="0" Text="D:\tmp" Width="Auto" Margin="10,15,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" IsEnabled="True"/>
Attributi condivisi
Max caratteri in una textBox
La property si chiama MaxLength, nel seguente caso è fissata a 500:
<TextBox x:Name="GradoRapporto" Style="{StaticResource txtStandard}" Width="181" Margin="0,0,0,0" MaxLength="50" TabIndex="26">
Ordine proprietà Margin
I parametri sono assegnati in senso orario partendo da SINISTRA.
Esempio:
XAML
<RadioButton Margin="1,2,3,4" Visibility="Visible"></RadioButton>
Effetto:
1 = Left,
2 = Top,
3 = Right,
4 = Bottom
Trigger
Trasformazioni
Trigger per trasformare lo stile di visualizzazione di una data vuota
<TextBlock x:Name="txbSaleOrderDate" Width="100" TextAlignment="Left" HorizontalAlignment="Left"> <TextBlock.Style > <Style TargetType="TextBlock" BasedOn="{StaticResource txbTitleH7Bold}" > <Setter Property="Text" Value="{Binding Source={StaticResource model}, Path=SaleOrderDate, StringFormat=\{0:dd\/MM\/yyyy\}}" /> <!-- Trigger per trasformare lo stile di visualizzazione di una data vuota --> <Style.Triggers> <DataTrigger Binding="{Binding Source={StaticResource model}, Path=SaleOrderDate}" Value="{x:Static System:DateTime.MinValue}"> <Setter Property="Text" Value="TESTO CHE SI VUOLE MOSTRARE" /> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock>
etc
Mappa e Link
Parole chiave: