Login Login
MORE

WIDGETS

Widgets

Wanted articles
Who is online?
Article tools

CSharp:XAML Tips

From Aino Wiki

Jump to: navigation, search

Si elencano Tips che riguardano prevalentemente la parte di Presentazione delle Viste quindi il cuore degli esempi riguarda la parte XAML

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


C# | WPF


Visual Studio


Parole chiave:

Author