Need to Use Canvas and Not Grid - c#

I have been asked to fix a bug where the width box is longer than what it should be its dropping off the edge of the screen but I am not allowed to change it from canvas. As you see from the rest of the images the rest of layout is fine i just need to make the width textbox a bit smaller.
In My layout view in visual studio it shows it the right size but on screen it is stretching it??
<Canvas Margin="0,0,-249.6,0">
<ListView Canvas.Left="12" Canvas.Top="48" Height="183" Name="listView1"
Width="453"
SelectionMode="Single">
<ListView.View>
<GridView>
<GridViewColumn Header="Order" Width="100"
DisplayMemberBinding="{Binding Path=CustomColumnsOrder}"></GridViewColumn>
<GridViewColumn Header="Display Name" Width="290"
DisplayMemberBinding="{Binding Path=CustomColumnsDisplayName}"></GridViewColumn>
<GridViewColumn Header="Width" Width="50"
DisplayMemberBinding="{Binding Path=CustomColumnsWidth}"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<Button Name="moveUpButton" Canvas.Left="472.4" Click="MoveUp" Canvas.Top="50" Content="Move Up"
Height="22" Width="74" />
<Button Name="moveDownButton" Canvas.Left="472.4" Click="MoveDown" Canvas.Top="80" Content="Move Down"
Height="22" Width="74" />
<Button Name="deleteButton" Canvas.Left="472.4" IsEnabled="{Binding ElementName=columnsList, Path=SelectedItems.Count}" Click="RemoveColumn" Canvas.Top="110" Content="Delete"
Height="22" Width="74" />
<Button Name="addButton" Click="AddColumn" Canvas.Left="472.4" Canvas.Top="140" Content="Add Item"
Height="22" Width="74" />
<Label Content="Name:" Canvas.Left="12" Canvas.Top="250" />
<TextBox Name="txtDsiplayName" Text="{Binding Path=CustomColumnsDisplayName, Mode=TwoWay}" Canvas.Left="12" Canvas.Top="280" Height="23"
Width="452" >
</TextBox>
<Label Content="Width:" Canvas.Left="470" Canvas.Top="250" />
<TextBox Name="txtWdith" Text="{Binding Path=CustomColumnsWidth, Mode=TwoWay}" Canvas.Left="470" Canvas.Top="280" Height="23"
Width="52.8"
/>
</Canvas>

Related

Enable field of a Listbox from combobox (C#-xaml)

I would like to enable or disable a field when a specific value in the combobox is selected:
In my xaml, I have a ListBox (ListToTransfert)wich is filled by dragging items from another Listbox (ListViewContents).
The ListToTransfert got 3 fields: Name, Gapand Time.
The field Namecannot be edited while the 2 others can be.
When the combobox has its value changed to Gapor to Time, I want the appropriate column to be enabled while the other one is disabled.
Here is the code of my XAML:
<!-- ListViewContents -->
<Label Content="Contents" Background="White" HorizontalContentAlignment="Center" HorizontalAlignment="Left" Margin="11,16,0,0" VerticalAlignment="Top" Width="400" Height="31"/>
<ListView Background="#bdc3c7" x:Name="ListViewContents" SelectionMode="Single" Margin="11,51.826,0,11" HorizontalAlignment="Left" Width="400">
<ListView.View>
<GridView >
<GridViewColumn Header="Name" Width="350" DisplayMemberBinding="{Binding Name}"/>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding TransferContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListViewContents}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Label Content="Label" Height="100" Width="100"/>
</ListView>
<!-- ListToTransfert -->
<TextBox Style="{StaticResource {x:Static ToolBar.TextBoxStyleKey}}"
HorizontalContentAlignment="Center"
HorizontalAlignment="Left" Margin="851,16,0,0"
VerticalAlignment="Top" Width="400" Height="31" Text="{Binding groupName}" />
<ListView Background="#bdc3c7" x:Name="ListToTransfert" ItemsSource="{Binding ContentsToTransfer}" HorizontalAlignment="Right" Width="400" Margin="0,51.826,21,11">
<ListView.View>
<GridView>
<GridViewColumn Header="Amount" >
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" Text="{Binding}"/>
</Grid>
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" Background="AliceBlue" HorizontalAlignment="Right" Text="{Binding Path=Name}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Gap"></GridViewColumn>
<GridViewColumn Header="Time"></GridViewColumn>
</GridView>
</ListView.View>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<command:EventToCommand Command="{Binding DeleteContent}"
CommandParameter="{Binding SelectedItem, ElementName=ListToTransfert}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
My combobox is not yet created since i'm not sure if there is a solution for this problem, tho there is always one.
Can you propose me a XAML solution to do that?
This can be done either via a group of RadioButtons or a single ComboBox.
RadioButton
If you don't need to control this behavior from the view model, you can use the following :
<RadioButton x:Name="TimeRadioButton" Content="Time" />
<GridViewColumn Header="Gap">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock IsEnabled="{Binding IsChecked, ElementName=GapRadioButton}"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Alternatively, you can add EnableGapColumn/EnableTimeColumn on your view model. However, it would be better if you create an enum to define this behavior :
public enum TransfertViewType
{
Gap, Time
}
And change your bindings with EnumToBooleanConverter:
<!-- put this in a resource -->
<converter:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
<RadioButton Content="Time" IsChecked="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
<TextBlock IsEnabled="{Binding ViewType, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static vm:YourViewModel.TransfertViewType}}"/>
ComboBox
It would pretty much the same as the second part of RadioButton section, except that you will need to create an IEnumerable<TransfertViewType> as the ItemsSource for the ComboBox. Or, an IDictionary<TransfertViewType, string> if you like to customize the description a little bit.
<!-- for ienumerable -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
SelectedValue="{Binding ViewType}" />
<!-- for idictionary -->
<ComboBox ItemsSource="{Binding TransfertViewTypes}"
DisplayMemberPath="Value" SelectedValuePath="Key"
SelectedValue="{Binding ViewType}" />

ListView in WPF not filling all available space

How do I make a ListView in WPF fill all of the available space? I have tried lots and lots of things but none of them work.
Most recently I tried nesting the ListView in a DockPanel and then using a binding on the ListView to grab the DockPanel's ActualHeight. This works well but there are other controls in the container and they need to be accommodated.
I don't really want to have to write OnControlLoaded() and OnControlResized() events and resize the ListView in code. What can I do?
Here is the XAML with the offending SortableListView on line 10.
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="15 5 5 5">
<Button x:Name="btnAddCost" Padding="3" ToolTip="Add Cost" Margin="0 0 5 0" Click="btnAddCost_Click" >
Add Cost
</Button>
<Button x:Name="btnDeleteCost" Padding="3" ToolTip="Delete Cost" Margin="0 0 5 0" Click="btnDeleteCost_Click" IsEnabled="{Binding ElementName=lvCosts, Path=SelectedItem, Converter={StaticResource falseWhenNullConverter}}" >
Delete Cost
</Button>
</StackPanel>
<ctrls:SortableListView DockPanel.Dock="Top" x:Name="lvCosts" Margin="1" SelectionMode="Single" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
ContextMenuOpening="lvCosts_ContextMenuOpening"
DefaultActionSelected="lvCosts_DefaultActionSelected" MouseDoubleClick="lvCosts_MouseDoubleClick"
ItemsSource="{Binding Booking.AdditionalCosts}">
<ListView.View>
<GridView>
<GridViewColumn Header="Category" Width="100" DisplayMemberBinding="{Binding Path=Category.Name}" ctrls:SortableListView.SortPropertyName="Category">
</GridViewColumn>
<GridViewColumn Header="Supplier" Width="110" DisplayMemberBinding="{Binding Path=Supplier}" ctrls:SortableListView.SortPropertyName="Supplier">
</GridViewColumn>
<GridViewColumn Header="Buy Currency" Width="100" DisplayMemberBinding="{Binding Path=BuyCurrency.Name}" ctrls:SortableListView.SortPropertyName="BuyCurrency">
</GridViewColumn>
<GridViewColumn Header="Buy Price" Width="110" DisplayMemberBinding="{Binding Path=BuyPrice}" ctrls:SortableListView.SortPropertyName="BuyPrice">
</GridViewColumn>
<GridViewColumn Header="Sell Currency" Width="100" DisplayMemberBinding="{Binding Path=SellCurrency.Name}" ctrls:SortableListView.SortPropertyName="SellCurrency">
</GridViewColumn>
<GridViewColumn Header="Sell Price" Width="110" DisplayMemberBinding="{Binding Path=SellPrice}" ctrls:SortableListView.SortPropertyName="SellPrice">
</GridViewColumn>
<GridViewColumn Header="Margin" Width="180" DisplayMemberBinding="{Binding Path=Margin}" ctrls:SortableListView.SortPropertyName="Margin">
</GridViewColumn>
</GridView>
</ListView.View>
<ListView.ContextMenu>
<ContextMenu x:Name="mnuCostOptions" >
<MenuItem x:Name="mniAddCost" Header="_Add Cost" Click="mniAddCost_Click" ></MenuItem>
<MenuItem x:Name="mniEditCost" Header="View/_Edit Cost" Click="mniEditCost_Click" IsEnabled="False"></MenuItem>
<MenuItem x:Name="mniDeleteCost" Header="_Delete Cost" Click="mniDeleteCost_Click" IsEnabled="False"></MenuItem>
</ContextMenu>
</ListView.ContextMenu>
</ctrls:SortableListView>
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="0,0,0,5">
<TextBlock Grid.Row="3" Grid.Column="0">Total Buy Price:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<rdf:NumericTextBox.Text>
<Binding Path="Booking.AdditionalCostsBuyPriceConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox.Text>
</rdf:NumericTextBox>
<TextBlock Grid.Row="3" Grid.Column="0">Total Sell Price:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<rdf:NumericTextBox.Text>
<Binding Path="Booking.AdditionalCostsSellPriceConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox.Text>
</rdf:NumericTextBox>
<TextBlock Grid.Row="3" Grid.Column="0">Total Margin:</TextBlock>
<rdf:NumericTextBox Grid.Row="3" Grid.Column="1" IsEnabled="False" MinWidth="50" Margin="0,0,10,0">
<Binding Path="Booking.AdditionalCostsMarginConvertedTotal" UpdateSourceTrigger="PropertyChanged"
Converter="{StaticResource currencyStringConverter}" ConverterParameter="#0.00" Mode="OneWay">
</Binding>
</rdf:NumericTextBox>
<TextBlock Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" Text="{Binding Path=Booking.SellPriceCurrency.Name, Mode=OneWay}" Margin="0,0,0,0"/>
</StackPanel>
</DockPanel>
Thanks, M
You have a DockPanel containing:
StackPanel
a SortableListView and
another StackPanel
1 & 2 are both docked to the Top; 3 is docked to the Bottom. That means you have nothing in the middle, ie. between 2 & 3. Rearrange the order of the elements to place the SortableListView third, and remove its DockPanel.Dock property so it takes up the remaining space.
In other words, instead of what you have now:
<DockPanel>
<StackPanel DockPanel.Dock="Top" ... >
<ctrls:SortableListView DockPanel.Dock="Top" ... >
<StackPanel DockPanel.Dock="Bottom" ... >
</DockPanel>
change it to this:
<DockPanel>
<StackPanel DockPanel.Dock="Top" ... >
<StackPanel DockPanel.Dock="Bottom" ... >
<ctrls:SortableListView ... >
</DockPanel>

Wpf change size of data inside gridView

hello i have data in a gridView and i want to change the size of the data:
i mean i want to resize the data who comes from a list in c#
code:
<Window x:Class="DadBussines.PL.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="800" Width="1600">
<Grid>
<Label Content="product name" FontSize="25" Margin="705,121,652.6,590.4"/>
<TextBox Name="name_textBox" FontSize="25" HorizontalAlignment="Left" Height="58" Margin="599,195,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="400" AllowDrop="True" IsHitTestVisible="True" TextChanged="name_textBox_TextChanged" />
<Button Content="add product" FontSize="25" HorizontalAlignment="Left" Margin="19,27,0,0" VerticalAlignment="Top" Width="123" Click="Button_Click_Add_Product"/>
<Button Content="delete product" FontSize="25" HorizontalAlignment="Left" Margin="161,27,0,0" VerticalAlignment="Top" Width="129" Click="Button_Click_Delete_Product"/>
<Button Content="add amount" FontSize="25" HorizontalAlignment="Left" Margin="304,27,0,0" VerticalAlignment="Top" Width="142" Click="Button_Click_Add_Amount"/>
<Button Content="delete amount" FontSize="25" HorizontalAlignment="Left" Margin="461,27,0,0" VerticalAlignment="Top" Width="151" Click="Button_Click_Remove_Amount"/>
<Button Content="change price" FontSize="25" HorizontalAlignment="Left" Margin="629,27,0,0" VerticalAlignment="Top" Width="151" Click="Button_Click_Change_Price" />
<Label Content="money in staff" FontSize="25" HorizontalAlignment="Left" Margin="1388,90,0,0" VerticalAlignment="Top" Width="166"/>
<Label Name="sumOfMoney_label" Content="" FontSize="25" HorizontalAlignment="Left" Margin="1185,95,0,0" VerticalAlignment="Top" Width="177"/>
<ListView Margin="10,288,10,10" Name="products_ListView" >
<ListView.View>
<GridView>
<GridViewColumn Header="index" Width="40" DisplayMemberBinding="{Binding id}"/>
<GridViewColumn Header="name product" Width="312" DisplayMemberBinding="{Binding name}"/>
<GridViewColumn Header="price product" Width="312" DisplayMemberBinding="{Binding price}" />
<GridViewColumn Header="amount product in cartons" Width="312" DisplayMemberBinding="{Binding amount}" />
<GridViewColumn Header="amount product inside cartons" Width="312" DisplayMemberBinding="{Binding amount_in_box}" />
<GridViewColumn Header="product type" Width="312" DisplayMemberBinding="{Binding catagory}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
If you want to style the output of each gridviewcolumn you need to set the celltemplate property of the column to something.
Take a look at the sample on MSDN:
http://msdn.microsoft.com/en-us/library/system.windows.controls.gridviewcolumn.celltemplate(v=vs.110).aspx

How to select an individual cell using ListView in WPF

I have created a small app, for which View part is as below.
I have used ListView for showing my data. This table (ListView) is being updated once I enter the data and click on Save. After which if I click on the data, the whole row is selected.
But I am not sure how to click an individual cell.
Can I do it using ListView? If Yes how? Or I need some other component?
VehicalForm.xaml
<Window x:Class="Seris.VehicalForm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="600">
<WrapPanel Orientation="Vertical" Margin="10 " >
<Label Content="Vehical No" HorizontalAlignment="Left"/>
<TextBox Name="VehicalNo_Text" Height="23" Width="80" TextWrapping="Wrap" Text="{Binding VehicalNo}" HorizontalAlignment="Left" />
<Label Content="Model" HorizontalAlignment="Left"/>
<TextBox Name="Model_Text" Height="23" Width="80" TextWrapping="Wrap" Text="{Binding Model}" HorizontalAlignment="Left" />
<Label Content="Manufacturing Date" HorizontalAlignment="Left"/>
<DatePicker Name="ManufacturingDate_DateTime" SelectedDate="{Binding ManufacturingDate, Mode=TwoWay}"/>
<Label Content="IU No" HorizontalAlignment="Left"/>
<TextBox Height="23" Width="80" Name="IUNO_Text" TextWrapping="Wrap" Text="{Binding IUNo}" HorizontalAlignment="Left"/>
<Label Content="Personnel" HorizontalAlignment="Left"/>
<ComboBox Name="Personnel_Combo" Text="{Binding Personnel}" HorizontalAlignment="Left" Width="116"/>
<Separator Height="20" RenderTransformOrigin="0.5,0.5" Width="16"/>
<Button Name="Save_Button" Command="{Binding SaveButton_Command}" Content="Save" Width="66"/>
<Label x:Name="Error_Label" Content="{Binding ErrorMessage, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" HorizontalAlignment="Left" Height="41" Width="137"/>
<ListView Height="294" Width="371" ItemsSource="{Binding ListItems, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" >
<ListView.View>
<GridView>
<GridViewColumn Header="Vehical No" DisplayMemberBinding="{Binding VehicalNo}" />
<GridViewColumn Header="Model" DisplayMemberBinding="{Binding Model}" />
<GridViewColumn Header="ManufacturingDate" DisplayMemberBinding="{Binding ManufacturingDate}" />
<GridViewColumn Header="IUNo" DisplayMemberBinding="{Binding IUNo}" />
<GridViewColumn Header="Personnel" DisplayMemberBinding="{Binding Personnel}" />
</GridView>
</ListView.View>
</ListView>
</WrapPanel>
</Window>
You can achieve this with a DataGrid. Replace your listview with something like this;
<DataGrid Height="294" Width="371" ItemsSource="{Binding ListItems, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" SelectionUnit="Cell" SelectionMode="Single" AutoGenerateColumns="False">
<DataGridTextColumn Header="Vehical No" Binding="{Binding VehicalNo}" />
<DataGridTextColumn Header="Model" Binding="{Binding Model}" />
<DataGridTextColumn Header="ManufacturingDate" Binding="{Binding ManufacturingDate}" />
<DataGridTextColumn Header="IUNo" Binding="{Binding IUNo}" />
<DataGridTextColumn Header="Personnel" Binding="{Binding Personnel}" />
</DataGrid>
Two important properties of the DataGrid are;
SelectionUnit="Cell" SelectionMode="Single"
These allow you to control how a user can select items. In this example you can only select a single cell.

How to make GridView support multiple selection in wpf

This is my wpf file. I want the GridView to support multiple selections.
<ListView Name="deviceListBox"
Width="630"
Height="282"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemsSource="{Binding Items}"
SelectionChanged="deviceListBox_SelectionChanged"
SelectionMode="Single">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="15"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<controls:PresenceIndicator Width="35"
Height="30"
Margin="7,0,0,0"
HorizontalAlignment="center"
VerticalAlignment="Center"
PhotoDisplayMode="Large"
SingleClickAction="ShowContactDetails"
Source="{Binding Path=SipURI}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.HeaderTemplate>
<DataTemplate>
<Label Width="95"
Height="25"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="Username"
Foreground="Black" />
</DataTemplate>
</GridViewColumn.HeaderTemplate>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Label Height="30"
Margin="7,0,0,0"
HorizontalAlignment="left"
VerticalAlignment="Center"
Content="{Binding Path=Username}"
Foreground="Black" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
Change your SelectionMode to Multiple or Extended. See this MSDN post
Set the DataGrid.SelectionMode:
<DataGrid SelectionMode="Single" ...

Categories

Resources