I want to work with a flipview with 2 pages,in each page four buttons,in each button I want to put a different image from 8 images,I work on a windows universal app,I tried this code :
I have tried with this code to put in every page of flipView only 4 buttons
xaml :
<FlipView x:Name="flipView1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="642" Background="Transparent" d:DataContext="{Binding Source={d:DesignInstance Type=local:ButtonImages, IsDesignTimeCreatable=True}}" ItemsSource="{Binding SampleItems}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10" >
<Image Source="{Binding ImageUri}"/>
</Button>
<Button Grid.Column="1" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10">
<Image Source="{Binding ImageUri}"/>
</Button>
<Button Grid.Column="0" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" >
<Image Source="{Binding ImageUri}"/>
</Button>
<Button Grid.Column="1" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" >
<Image Source="{Binding ImageUri}"/>
</Button>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
I have created a class named "ButtonImages" that contains images URIs:
public class SampleItem
{
public string ImageUri { get; set; }
}
public class ButtonImages
{
public List<SampleItem> SampleItems { get; set; }
public ButtonImages()
{
SampleItems = new List<SampleItem>();
SampleItems.Add(new SampleItem()
{
ImageUri = "images/bar.png"
});
SampleItems.Add(new SampleItem()
{
ImageUri = "images/cuisine.png"
});
...... //the rest of 8 images list
}
}
then I have used a Datacontext in my MainPage.xmal.cs constructor to call the images and put them in every button in the flipview pages:
public MainPage()
{
this.DataContext = new ButtonImages();
this.InitializeComponent();
}
what I get as a result is 8 pages not 2 pages,each page contains 4 buttons with the same image,miss I any thing??
thanks a lot for help
Related
I am building an expander control where I want to have an additional button in the header (additional to the toggle). When I add a button on the <Expander.Header>, the binded command is not triggered when it is clicked.
I have tried creating a style/template for the Expander and Expander.Header so that the Expander's toggle is only triggered on its click (rather than the entire header). I did this thinking that it is some sort of heirarchical issue where the header is consuming the click event rather than my button, but it did not work out as I had hoped...
Is there a specific way I should modify the template to allow for a button to be placed in the header and have the button's command executed?
xaml of my expander control - all bound to my VM, can confirm the binding works correctly:
<Expander Background="White">
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="center"
FontSize="16"
Margin="5 0 5 0"
Text="{Binding Name}"/>
<Button
Grid.Column="2"
Width="15"
Height="15"
Margin="10 10 10 10"
Command="{Binding OpenButtonCommand}"/>
</Grid>
</Expander.Header>
<TextBlock Margin="30 0 0 0">This is a test sub component</TextBlock>
</Expander>
Thank you
Actually it should be working;
Tested with following VM:
using Prism.Commands;
using Prism.Mvvm;
using System;
namespace WpfApp2
{
public class MainViewModel : BindableBase
{
public DelegateCommand OpenButtonCommand { get; private set; }
private string m_Name = "Test Name";
public string Name
{
get { return m_Name; }
set
{
m_Name = value;
RaisePropertyChanged(nameof(Name));
}
}
public MainViewModel()
{
OpenButtonCommand = new DelegateCommand(OpenButtonCommandExecute);
}
private void OpenButtonCommandExecute()
{
Name = "clicked";
}
}
}
and XAML:
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Grid>
<Expander
Width="300"
HorizontalAlignment="Left"
Background="White">
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
Margin="5,0,5,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Name}"
TextAlignment="Left"
TextWrapping="Wrap" />
<Button
Grid.Column="2"
Width="15"
Height="15"
Margin="10,10,10,10"
Command="{Binding OpenButtonCommand}" />
</Grid>
</Expander.Header>
<TextBlock Margin="30,0,0,0">This is a test sub component</TextBlock>
</Expander>
</Grid>
Result:
I'm currently working on a database-based application for work and I am struggling with connecting the ViewModel methods to my view. Here is what I've got so far:
public class MainViewModel : BaseViewModel
{
public ICommand SwitchViewsCommand { get; private set; }
public MainViewModel()
{
SwitchViewsCommand = new RelayCommand((parameter) => CurrentView = (UserControl)Activator.CreateInstance(parameter as Type));
}
private UserControl _currentView;
public UserControl CurrentView
{
get
{
return _currentView;
}
set
{
if (value != _currentView)
{
_currentView = value;
OnPropertyChanged("CurrentView");
}
}
}
}
This is my MainViewModel and following my Xaml-Code
<Window x:Class="sKillPase.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:sKillPase.Core.ViewModels;assembly=sKillPase.Core" xmlns:view="clr-namespace:sKillPase.View"
xmlns:local="clr-namespace:sKillPase.View"
d:DataContext="{d:DesignInstance Type=viewmodels:MainViewModel}"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="1200">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Border x:Name="Top" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" ></Border>
<Border x:Name="Buttons" Grid.Row="1" Grid.RowSpan="2" Background="Black"></Border>
<Border x:Name="Content" Grid.Row="1" Grid.Column="1" Background="#FF303030"></Border>
<Border x:Name="Bottom" Grid.Row="2" Grid.Column="1" Background="Black"/>
<ContentPresenter Grid.Row="1" Grid.Column="1" x:Name="ContentArea" Content="{Binding CurrentView}"/>
<StackPanel x:Name="ButtonPanel" Margin="5" Grid.Row="1">
<Button x:Name="Data"
Command="{Binding SwitchViewsCommand }"
CommandParameter="{x:Type local:DataView}"
>
Daten bearbeiten
</Button>
<Button x:Name="Report"
Command="{Binding SwitchViewsCommand}"
CommandParameter="{x:Type viewmodels:ReportViewModel}"
>
Report erstellen
</Button>
</StackPanel>
</Grid>
So my problem is, that if I compile the application, the Content Presenter doesn't show anything. It stays completely empty. So what can I do to add the different views (which I declared as User Controls) to my Content Presenter, by pressing one of the two buttons?
Furthermore, one of the views contains a data grid that shows the different tables of my database. So if I have to watch out for some problems regarding the database, please feel free to state.
Thanks in advance :)
<Page.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" x:Name="testTest" />
</ResourceDictionary>
</Page.Resources>
itemscontrol:
<Grid Grid.Row="1" Grid.ColumnSpan="2" Name="testName">
<ScrollViewer VerticalScrollBarVisibility="Hidden" PanningMode="Both">
<ItemsControl ItemsSource="{Binding Path=NextMeetingList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.Row="0">
<Border x:Name = "myVariable" Grid.Column="0" Grid.Row="0" Margin="10" Height="30" Background="#A2C2E7" CornerRadius="5" BorderBrush="#A2C2E7">
<Grid Margin="8,0,8,0" Background="#A2C2E7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="White" FontWeight="Bold" FontSize="15" Margin="0,4,0,0" HorizontalAlignment="Left">month</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Foreground="White" FontWeight="Bold" FontSize="15" Margin="0,4,0,0" HorizontalAlignment="Right">1 Meeting</TextBlock>
</Grid>
</Border>
<Border Grid.Column="0" Grid.Row="0" Margin="10" Height="60" Background="GhostWhite" CornerRadius="3" BorderBrush="{Binding BorderColor}" BorderThickness="0,8,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="118"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="40" Margin="10,5,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Day}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="12" Margin="77,13,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding DayString}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="70,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding endDate.Hour}"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="86,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text=":"/>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontSize="14" Margin="90,26,0,0" Height="Auto" Style="{DynamicResource Lato-Semibold}" Text="{Binding MinuteString}"/>
<Border Grid.Row="0" Grid.Column="0" Width="1" BorderBrush="#BABABA" Height="40" Margin="115,-6,0,0" BorderThickness="1" HorizontalAlignment="Left"></Border>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding subject}" FontWeight="Bold" FontSize="17" Margin="10,10,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Width="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Text="{Binding descr}" FontSize="10" Margin="20,27,150,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="{Binding companyName}" FontSize="10" Margin="0,10,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text="sala del consiglio" FontSize="10" Margin="0,27,30,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Text=">" FontSize="15" VerticalAlignment="Center" Margin="0,-5,10,0"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
Hello everyone , I should be able to make a grid Collapsed inside a ItemsControl in WPF .
The problem is that I can not understand how to use the booleanToVisibilityConverter from code behind .
Maybe I'm missing out on a glass of water but I can not connect how to do, if the name TestTest septum can not see it then the code-behind .
from code behind i don't see "myVariable"
To get hold of the converter from code-behind, you'd have to look it up in the Page's Resources dictionary. Do something like this in your Page class:
IValueConverter converter = this.Resources["booleanToVisibilityConverter"] as IValueConverter;
Giving the converter's resource entry a Name is not necessary; here you want to use the Key. Also, converters are normally used with XAML bindings -- if you want one in code, you can just instantiate one:
IValueConverter converter = new BooleanToVisibilityConverter();
Common usage goes something like this:
<Window.Resources>
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="Converter" />
</ResourceDictionary>
</Window.Resources>
<Grid Visibility="{Binding Display, Converter={StaticResource Converter}}">
...
</Grid>
Code-behind, using the window class itself as the data context:
public partial class MainWindow
{
public bool Display { get; set; };
public MainWindow()
{
InitializeComponent();
DataContext = this; // For the binding
Display = true;
}
}
Okay, one more, this time without data binding or converter:
<Grid x:Name="myGrid">
...
</Grid>
Code-behind:
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
myGrid.Visibility = Visibility.Visible;
}
}
The above doesn't explain why the OP couldn't reference "myVariable" from code-behind. That's because it's in a template, which is instantiated (dynamically) once per item in the collection.
It's still possible to get at it from code -- dynamically. For example, this XAML uses a DataTemplate:
<ItemsControl ItemsSource="{Binding Names}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid x:Name="innerGrid" Loaded="OnGridLoaded" DataContext="{Binding Name, Mode=OneWay}">
<TextBox Text="{Binding Path=., Mode=OneWay}" />
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The following code-behind lets us reach into the template and make "innerGrid" disappear selectively:
public class Data
{
public string Name { get; }
public Data(string name)
{
Name = name;
}
}
public partial class MainWindow
{
public Data[] Names { get; } = { new Data("Hello"), new Data("World") };
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private void OnGridLoaded(object sender, RoutedEventArgs e)
{
Grid outerGrid = sender as Grid;
Grid innerGrid = outerGrid?.FindName("innerGrid") as Grid;
if (innerGrid != null)
{
string name = innerGrid.DataContext as string;
if (name == "Hello")
{
innerGrid.Visibility = Visibility.Collapsed;
}
}
}
}
(To make the string easily accessible I bound the Data object to the "innerGrid" DataContext.)
I'm trying to find a way to display a horizontal List of items in WPF, the trick is that the Window which contains the List will be displayed on various screen sizes and all the items in the list need to be resized to fill the available space without any use of scroll bars.
I've found that a ViewBox control can be used to achieve the desired affect, but the ViewBox works only if I set <RowDefinition Height="300"/>.This approach doesn't work because if you have a certain number of items in the List they start becoming cut off.
If I remove <RowDefinition Height="300"/> then the first item in the list fills the screen and the rest are cut off
Any suggestions on how I can make all the items in the list resize to fill the available space no matter what the screen resolution is?
XAML:
<Window x:Class="ViewBoxExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowState="Maximized">
<ItemsControl ItemsSource="{Binding Path=Employees}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding Path=Name}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding Path=Surname}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2">
<TextBlock Text="{Binding Path=Age}" />
</Viewbox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
C#:
using System.Collections.Generic;
using System.Windows;
namespace ViewBoxExample
{
public partial class MainWindow : Window
{
public List<Employee> _employees = new List<Employee>();
public List<Employee> Employees
{
get { return _employees; }
set { _employees = value; }
}
public MainWindow()
{
InitializeComponent();
Employees = new List<Employee>()
{
new Employee{ Name="Name1",Surname="Surname1",Age=20},
new Employee{ Name="Name2",Surname="Surname2",Age=30},
new Employee{ Name="Name3",Surname="Surname3",Age=40},
new Employee{ Name="Name4",Surname="Surname4",Age=50},
new Employee{ Name="Name5",Surname="Surname5",Age=60},
};
this.DataContext = this;
}
}
public class Employee
{
public string Name { get; set; }
public string Surname { get; set; }
public int Age { get; set; }
}
}
Just put your ItemsControl in ViewBox
<Viewbox>
<ItemsControl ItemsSource="{Binding Path=Employees}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding Path=Name}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding Path=Surname}" />
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="2">
<TextBlock Text="{Binding Path=Age}" />
</Viewbox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
EDIT: if i am doing the same type of thing i would use the actual Height and Width approach as explained by Kent Boogaart in this Answer
I am using Callisto Toolkit to create a live hub tile in a Windows 8 application but I am not managing to perform data binding for my live tile. The code I am using is the following:
<callisto:LiveTile x:Name="liveTile2"
Background="#3B5998"
ItemsSource="{Binding Tile}"
Grid.Column="5"
Grid.Row="1"
Height="250"
VerticalAlignment="Top"
BorderBrush="White" BorderThickness="1"
Margin="5"
Direction="Up">
<callisto:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.DataContext>
<ViewModel:Tile/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="tileImage" Source="{Binding Image}"/>
<TextBlock Foreground="White"
TextWrapping="Wrap"
TextTrimming="WordEllipsis"
FontSize="14"
Grid.Row="1" Margin="0,71,0,0" Text="{Binding Msg}" />
</Grid>
</DataTemplate>
</callisto:LiveTile.ItemTemplate>
<callisto:LiveTile.DataContext>
<ViewModel:LiveTileData/>
</callisto:LiveTile.DataContext>
</callisto:LiveTile>
And this is the class for the tile:
namespace Test.ViewModel
{
public class Tile
{
public string Msg { get; set; }
public Uri Image { get; set; }
}
public class LiveTileData
{
private static ObservableCollection<Tile> tileData = new ObservableCollection<Tile>();
public static ObservableCollection<Tile> TileData
{
get
{
return tileData;
}
}
}
}
You are doing binding incorrectly. You should do binding LiveTile's ItemsSource as ObservableCollection<Tile> TileData. Moreover the DataContext is passed to the LiveTile itself not to its template. Check out the below code.
XAML
<callisto:LiveTile x:Name="liveTile2"
Background="#3B5998"
ItemsSource="{Binding TileData}"
Grid.Column="5"
Grid.Row="1"
Height="250"
VerticalAlignment="Top"
BorderBrush="White" BorderThickness="1"
Margin="5"
Direction="Up">
<callisto:LiveTile.ItemTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="tileImage" Source="{Binding Image}" Stretch="None"/>
<TextBlock Foreground="White"
TextWrapping="Wrap"
TextTrimming="WordEllipsis"
FontSize="14"
Grid.Row="1" Margin="0,71,0,0" Text="{Binding Msg}" />
</Grid>
</DataTemplate>
</callisto:LiveTile.ItemTemplate>
<callisto:LiveTile.DataContext>
<ViewModel:LiveTileData />
</callisto:LiveTile.DataContext>
</callisto:LiveTile>
C#
public class Tile
{
public string Msg { get; set; }
public Uri Image { get; set; }
}
public class LiveTileData
{
public LiveTileData()
{
tileData.Add(new Tile { Msg = "Stack Overflow", Image = new Uri("http://jenswinter.com/image.axd?picture=stackoverflow-logo-250.png") });
tileData.Add(new Tile { Msg = "Super User", Image = new Uri("http://superuser.com/content/superuser/img/logo.png") });
}
private static ObservableCollection<Tile> tileData = new ObservableCollection<Tile>();
public static ObservableCollection<Tile> TileData
{
get
{
return tileData;
}
}
}