Silverlight: AutoCompleteBox and TextWrapping - autocomplete

How to enable TextWrapping in the AutoCompleteBox control of the SilverlightToolkit (November 2009)?
There is no property to set the wrapping mode. So is there any workaround?
Sven
Here are more infos about my current problem: To me the AutoCompleteBox consists of a list which displays all possible values and a TextBox where I enter a search string and display a selected value. I want now, that the selected value in the TextBox wraps.
So here is my current XAML, which uses the AutoCompleteBox in a DataGrid:
<data:DataGrid x:Name="GrdComponents"
ItemsSource="{Binding Path=Components}" AutoGenerateColumns="false"
Margin="4" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
HorizontalScrollBarVisibility="Visible">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header="Component" Width="230">
<data:DataGridTemplateColumn.CellEditingTemplate >
<DataTemplate>
<input:AutoCompleteBox Text="{Binding Component.DataSource, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}"
Loaded="AcMaterials_Loaded"
x:Name="Component"
SelectionChanged="AcMaterial_SelectionChanged"
IsEnabled="{Binding Component.IsReadOnly, Mode=OneWay, Converter={StaticResource ReadOnlyConverter}}"
BindingValidationError="TextBox_BindingValidationError"
ToolTipService.ToolTip="{Binding Component.Description}"
IsTextCompletionEnabled="False" FilterMode="Contains"
MinimumPopulateDelay="1" MinimumPrefixLength="3"
ValueMemberPath="Description">
<input:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DescriptionTypeNumber}"/>
</DataTemplate>
</input:AutoCompleteBox.ItemTemplate>
</input:AutoCompleteBox>
</DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
The AutoCompleteBox uses different values for the list (DescriptionTypeNumer) and for the selected value (Description).

Finally, the following did the trick: Define a Style for the textbox...
<UserControl.Resources>
<Style x:Key="myTBStyle" TargetType="TextBox">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</UserControl.Resources>
and then assign the Style:
<input:AutoCompleteBox TextBoxStyle="{StaticResource myTBStyle}"/>
Sven

TextWrapping="Wrap"
in context:
<TextBlock Margin="5" Text="Enter a date:" TextWrapping="Wrap" />
<input:AutoCompleteBox VerticalAlignment="Top" Margin="5" Width="170" Height="30" x:Name="myACB"
ItemsSource="{Binding}"
ValueMemberBinding="{Binding Path=ReleaseDate, Converter={StaticResource FormatConverter},
ConverterParameter=\{0:d\}}" >
<input:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=ReleaseDate, Converter={StaticResource FormatConverter},
ConverterParameter=\{0:d\}}" />
</DataTemplate>
</input:AutoCompleteBox.ItemTemplate>
</input:AutoCompleteBox>
from:
http://msdn.microsoft.com/en-us/library/system.windows.controls.autocompletebox.valuememberbinding(VS.95).aspx
another example:
<controls:AutoCompleteBox x:Name="Autocomplete_Single" Populating="AutoCompleteBox_Populating" SearchMode="None" IsTextCompletionEnabled="True" Height="30" Width="100" Margin="10,10,0,0" KeyUp="Autocomplete_Single_KeyUp">
<controls:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10,0,0,0">
<TextBlock FontWeight="Bold" Width="80" HorizontalAlignment="Center" FontSize="12" Text="{Binding Mode=OneWay, Path=Name}"/>
<TextBlock TextWrapping="Wrap" Width="80" Text="{Binding Mode=OneWay, Path=ValueKindID}" FontSize="12"/>
</StackPanel>
</DataTemplate>
</controls:AutoCompleteBox.ItemTemplate>
</controls:AutoCompleteBox>

Related

WPF - Click on item in ListView

I am trying to get the selected item of a listview by clicking or double clicking on it.
<StackPanel x:Name="doelenContentPanel" Orientation="Horizontal" Width="Auto" Grid.Column="0">
<Grid Margin="0,0,50,0" Width="Auto">
<TextBlock Name="textBlock" HorizontalAlignment="Left" Height="21" Margin="10,61,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="248" Text="PickerUse"/>
<ListView Name="listView" HorizontalAlignment="Left" Height="Auto" Width="Auto" VerticalAlignment="Top">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="200" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</StackPanel>
for buttons I can just use the method Add_click ($window.rbImport.Add_Click({ ) on an item in WPF but this does not exist on listview. How can I set this programmatically without changing the WPF itself?
I tried $window.listview but when I choose a mouse method it is telling me that this method does not exist:
Method invocation failed because [System.Windows.Controls.ListView] does not contain a method named 'MouseDoubleClicked'
Thanks
Solution was:
$WPFListView.Add_MouseDoubleClick({Write-Host "Double clicked"})

Flyout menu in UWP with MVVM

I'm trying to implement a Flyout menu in a Windows 10 App (using MVVM) that opens when holding down an item of a GridView. I've been looking and I haven't been able to find any examples that works for me. The Flyout menu is not opening to display options. Does anyone know how can I do it?
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Image Source="{Binding Dictionary}" Height="25"/>
<TextBlock Text="{Binding Title}" Foreground="White" Width="170"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
Note: Solution found in https://marcominerva.wordpress.com/2013/12/17/using-a-behavior-to-open-attached-flyouts-in-winows-81-store-apps/
I think what you want to set is StackPanel.Flyout instead of FlyoutBase
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</StackPanel.Flyout>
<Image Source="{Binding Dictionary}" Height="25"/>
<TextBlock Text="{Binding Title}" Foreground="White" Width="170"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
Alternatively if this doesn't work for you you can target the GridViewItem.Flyout
<GridView>
<GridView.Resources>
<Style TargetType="GridViewItem">
<Setter Property="Flyout">
<Setter.Value>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DeleteCommand}"/>
</MenuFlyout>
</Setter.Value>
</Setter>
</Style>
</Gridview.Resources>

array list databind xaml windows 8 unsuccesss

Binding Data to Grid View finding it difficult
if (response.StatusCode == HttpStatusCode.OK)
{
List<dashboard1> variable1 = new List<dashboard1>();
var jsonString = await response.Content.ReadAsStringAsync();
dynamic arr = JsonParser.Parse(jsonString);
var items2 = arr[0].items;
foreach (var item3 in items2)
{
variable1.Add(item3.sectionName);
variable1.Add(item3.procedureName);
variable1.Add(item3.reportName);
variable1.Add(item3.templateName);
}
itemGridView.ItemsSource = variable1;
}
parsed json and stored it in list
now i don't know how to bind these values to User Interface please can u help me to continue and pass values to Grid view .
You have to bind properties of class dashboard1 with the UI controls. Suppose you are showing all the properties , in TextBlock then bind textbox's text property with property of class dashboard1.
So code will be like this.
<TextBlock Text={Binding sectionName} />
<GridView Grid.Row="2"
x:Name="itemGridView"
SelectionMode="Multiple"
SelectionChanged="itemGridView_SelectionChanged" >
<GridView.ItemTemplate >
<DataTemplate >
<Border BorderThickness="1" BorderBrush="#7b579b" Tapped="Border_Tapped_1" >
<Grid Name="tile" Background="{Binding SubjectTilebackGround}" Height="150" Width="150" Tapped="tile_Tapped_1" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="hello2" Text="{Binding SubjectName}" Foreground="White" FontSize="15" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="8" FontWeight="ExtraLight" Visibility="{Binding isTopSubjectTextVisible}"/>
<TextBlock Text="{Binding SubjectName}" Foreground="White" FontSize="15" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="8" FontWeight="ExtraLight" Visibility="{Binding isBottomSubjectTextVisible}" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="98,0,0,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate >
<DataTemplate >
<Grid Margin="0,0,0,6" >
<Button
AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CategoryName}" Margin="2" FontSize="30" Foreground="White" FontWeight="Light" />
<TextBlock Text="( 17 Apps )" Margin="10,2,2,2" FontSize="25" Foreground="White" FontWeight="ExtraLight" VerticalAlignment="Bottom" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
in this example i have added some more useful properties of gridview..and wherever i have used binding like this.
Background="{Binding SubjectTilebackGround}"
it means "SubjectTilebackGround" is a property present in the class of which objects you have made your list ..means in your case is is DASHBOARD1..so any properties available in your dashboard that you can bind them as i did. hope this will help.

Attached Behaviors in Windows Store Apps with MVVM Light

I've been trying to use Attached Behaviors in a simple Windows Store App using the MVVM Light framework. Since we can't use System.Windows.Interactivity, as in Windows Phone, I've been using both Windows.UI.Interactivity and WinRtBehaviors lybraries. They work well but the problem is that I can't declare an attached behavior inside a data template.
What I really want is to attach a command to any item in a GridView, so that I can pass the item id as the parameter. Since that attached behavior doesen't work, the only solution I found consists on using the "SelectionChanged" event of the GridView and pass the SelectedItem as the parameter to a property in the ViewModel:
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="Single"
SelectedItem="{Binding SelectedArtist, Mode=TwoWay}"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="SelectionChanged" Command="SelectArtistCommand" CommandParameter="{Binding SelectedArtist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
It would be very nice doing something like that (where there's no need to have a SelectedArtist property in the ViewModel)
<GridView Grid.Row="1"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Padding="116,136,116,46"
ItemsSource="{Binding GeoTopArtists.topartists.artist}"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding image[4].text}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding url}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="Tapped" Command="SelectArtistCommand" CommandParameter="{Binding Artist.mbid}"/>
</WinRtBehaviors:Interaction.Behaviors>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This link may help you out. The dependency property is defined and hooked to a command in view model. So whenever there is interaction in view, the selected item can be sent as commanding parameter which is clearly demonstrated in this video.

Update source trigger when a button is clicked?

i've a contentcontrol in my Wpf-App (MVVM) which is bound to an object and displays the objects properties in textboxes, so the user can edit the values of the properties.
i have to buttons in my control "Ok" and "Cancel".. I would like to use UpdateSourceTrigger="Explicit" so that the ViewModel only gets updated when the user explicitly clicks 'Ok', rather than updating as textbox values are modified. How do i achive this.
this is how my viewmodel looks like..
class NeedViewModel : CarePlanEntityViewModelBase
{
public CPLNursingNeedVersion CurrentNeedVersion
{
get { return currentNeedVersion; }
set
{
currentNeedVersion = value;
this.OnPropertyChanged("CurrentNeedVersion");
}
}
}
this is how my view looks like
<DataTemplate x:Key="NeedDataEntryDataTemplate">
<Border Background="White"
BorderThickness="2"
BorderBrush="#4682B4"
local:PublishReadOnlyProperty.Observe="True"
local:PublishReadOnlyProperty.ActualWidth="{Binding Path=Width,Mode=OneWayToSource,UpdateSourceTrigger=PropertyChanged}"
MinWidth="410">
<Grid Name="mainGrid">
<Grid.BindingGroup>
<BindingGroup>
</BindingGroup>
</Grid.BindingGroup>
<Grid.RowDefinitions>
<RowDefinition Height="28" MinHeight="28"/>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7" MaxWidth="7"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="68" MaxWidth="75"></ColumnDefinition>
<ColumnDefinition Width="10" MaxWidth="10"></ColumnDefinition>
<ColumnDefinition Width="68" MaxWidth="75"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Padding="0,3,0,3"
Name="label9"
Grid.Row="1" Grid.Column="1"
Margin="3"
FontSize="13"
HorizontalAlignment="Left" >Voimassaoloaika:</Label>
<hcw:HCWDateTimePicker Padding="0,3,0,3"
x:Name="startDateTimePicker"
Grid.Row="1" Grid.Column="2"
Margin="5,3,3,3"
FontSize="13"
HorizontalAlignment="Left"
MaxWidth="120"
DateControlMode="Mandatory"
SelectedDate="{Binding Path=CurrentNeedVersion.ValidFromDate,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DisplayMode="DateOnly" />
<Label Padding="0,3,0,3"
Name="label8"
Grid.Row="1" Grid.Column="3"
Margin="3,3,3,3"
HorizontalAlignment="Center"
FontSize="13">-</Label>
<hcw:HCWDateTimePicker x:Name="endDateTimePicker"
Padding="0,3,0,3"
Grid.ColumnSpan="5" Grid.Row="1" Grid.Column="4"
Margin="3"
FontSize="13"
HorizontalAlignment="Left"
MaxWidth="120"
DisplayMode="DateOnly"
SelectedDate="{Binding Path=CurrentNeedVersion.ValidToDate,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<Label Name="label26"
Padding="0,3,0,3"
FontSize="13"
Grid.Row="2" Grid.Column="2"
Margin ="20,3,3,3"
HorizontalAlignment="Left"
Grid.ColumnSpan="6">Huomiomerkitty</Label>
<CheckBox Padding="0,3,0,10"
Grid.Row="2" Grid.Column="2"
IsChecked="{Binding Path=CurrentNeedVersion.IsNoteworthy,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Name="note"
FontSize="13"
Margin="3,3,20,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"
IsEnabled="True" />
<ContentControl Content="{Binding}"
Grid.Row="3" Grid.ColumnSpan="9"
ContentTemplate="{DynamicResource ClassificationSelectorDataTemplate}"/>
<Label Padding="0,3,0,3"
Grid.Row="4" Grid.Column="1"
Margin="3"
FontSize="13"
Name="needLabel"
HorizontalAlignment="Left" >Tarve:</Label>
<hcw:HCWTextBox Padding="3,3,0,3"
Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="6"
FontSize="13"
Margin="3"
Name="needTextBox"
Text="{Binding Path=CurrentNeedVersion.NeedText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextWrapping="Wrap"
AcceptsReturn="True" />
<Label Padding="0,3,0,3"
Margin="3"
Name="goalLabel"
FontSize="13"
Grid.Row="8" Grid.Column="1" Grid.ColumnSpan="1">Tavoite:</Label>
<TextBox Padding="0,3,0,3"
Grid.Row="8" GridColumn="2" Grid.ColumnSpan="6"
FontSize="13"
Margin="3"
Text="{Binding Path=CurrentNeedVersion.GoalText, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Stretch"
Name="goalTextBox"
TextWrapping="Wrap"
AcceptsReturn="True" />
<Label Name="temporaryLabel"
Padding="0,3,0,3"
FontSize="13"
Grid.Row="9" Grid.Column="2" Grid.ColumnSpan="6"
Margin="20,3,3,3"
HorizontalAlignment="Left">Keskeneräinen</Label>
<CheckBox Padding="0,3,0,10"
Grid.Row="9" Grid.Column="2"
Name="temporaryCheckBox"
FontSize="13"
Margin="3,3,20,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"
IsEnabled="True" />
<Button Name="acceptButton"
Command="{Binding Path=AcceptNeedDEC}"
Margin="0,0,0,7"
Grid.Row="10" Grid.Column="5"
FontSize="13"
MinWidth="68"
Content="OK"
VerticalAlignment="Center"
Background="WhiteSmoke" />
<Button Command="{Binding Path=CloseDEC}"
Name="cancelButton"
Margin="0,0,0,7"
Grid.Row="10" Grid.Column="7"
HorizontalAlignment="Right"
FontSize="13"
MinWidth="68"
Content="Peruuta"
VerticalAlignment="Center"
Background="WhiteSmoke" />
</Grid>
</Border>
</DataTemplate>
You need to do it in code-behind:
var bindingExpression = BindingOperations.GetBindingExpression(startDateTimePicker, HCWDateTimePicker.SelectedDateProperty);
bindingExpression.UpdateSource();
You could take all of the properties the View is binding to and place them in a different class. Then have two instances of that class in the ViewModel, one public for data binding, and a private one. Once the button is clicked, copy the values from the public one to the private one, then run all of your logic against the private one.