I try to save and load TabItems via XamlWriter and XamlReader at runtime so that the user can restore the previous session. Each TabItem consists of UserControls and standard WPF controls like grids,buttons and checkboxes.
It all works fine until I try to subscribe to events of let's say a button.
If I raise them manually with RaiseEvent() they work, but if I click on them nothing happens. Even if I set IsEnabled=false the button is displayed as enabled. LogicalTreeHelper.FindLogicalNode gives me the right button, but the Click event also won't trigger. The IsLoaded property is false, so I assume there has to be some underlying problem with the initialization.
Basically this is the code to read from the file
StreamReader sw = new StreamReader(file);
XmlReader xmlReader = XmlReader.Create(sw);
TabItem tabItem = (TabItem)XamlReader.Load(xmlReader);
.. and this to save each TabItem to a seperate xml file
foreach (TabItem tabItem in tabControlMain.Items)
{
StreamWriter sw = new StreamWriter(Path.Combine(path,tabItem.Name + ".xml"), false);
string savedTab = XamlWriter.Save(tabItem);
sw.Write(savedTab);
sw.Close();
}
Here is an example TabItem saved to a file
<TabItem IsSelected="True" Header="Test" Name="tabItem1" HorizontalAlignment="Left" VerticalAlignment="Top" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:womoc="clr-namespace:WeldOsMqttOpcClient;assembly=blabla">
<TabItem.HeaderTemplate>
<DataTemplate DataType="{x:Type TabItem}">
<TextBox Margin="0,0,30,0" Text="{Binding Path=.}" />
</DataTemplate>
</TabItem.HeaderTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<womoc:UcOverviewTabPage Autoconnect="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Name="gridParentOv">
<Grid Name="gridMqttOpcControls" Height="599.08" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<womoc:UcConnection Name="ucOpc" MinWidth="400" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<GroupBox Header="OPC [10.5.51.130]" Name="groupBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<Grid Name="gridTextBoxesWithValues" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="rowLabel" />
</Grid.RowDefinitions>
<Label Background="#FF008000" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Name="labelConnected" Width="190" Height="26" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">Connected!</Label>
</Grid>
</ScrollViewer>
</GroupBox>
</womoc:UcConnection>
</Grid>
<Grid Name="gridConnection" MinHeight="30" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Button Name="btnConnect" Width="55" Margin="100,0,0,10" HorizontalAlignment="Center" VerticalAlignment="Bottom" IsEnabled="False">Connect</Button>
<TextBox Name="tbIPAddress" Width="95" Height="18" Margin="0,0,100,10" HorizontalAlignment="Center" VerticalAlignment="Bottom" IsEnabled="False">10.5.51.130</TextBox>
<CheckBox Name="cbMqtt" Width="46" Height="15" Margin="20,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" IsEnabled="False">Mqtt</CheckBox>
<CheckBox IsChecked="True" Name="cbOpc" Width="42" Margin="0,0,20,10" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsEnabled="False">Opc</CheckBox>
</Grid>
</Grid>
</womoc:UcOverviewTabPage>
</Grid>
</TabItem>
UcOverviewTabPage is one of my UserControls, in which there is for example a button. I try to subscribe to the events manually ->
public UcOverviewTabPage()
{
InitializeComponent();
cbMqtt.Checked += CbMqtt_Checked;
cbMqtt.Unchecked += CbMqtt_Unchecked;
cbOpc.Checked += CbOpc_Checked;
cbOpc.Unchecked += CbOpc_Unchecked;
btnConnect.Click += BtnConnect_Click;
var children = LogicalTreeHelper.FindLogicalNode(this, "btnConnect") as Button;
bool loaded = children.IsLoaded;
// -> FALSE
}
Bear in mind, creating new custom UserControls during runtime works perfectly. The problem only occurs when reading out of the XML file.
I except the UserControls or any other Controls to work like they do when created during runtime. What am I missing?
Related
I am building a WPF MVVM application.
What I have:
I have a ShellWindow which looks like this:
It is composed by 2 rows:
1: the hamburger menu (not important) with Height="*"
2: the console with Height="100"
The console is a UserControl:
<UserControl
//namespaces>
<Grid Name="LoggingGrid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
Click="CollapseBtn_Click"
Content="▲">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0" Orientation="Horizontal">
<Image
Height="25"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</TextBlock>
<Border Grid.Row="1">
<ListView
x:Name="LoggingList"
Margin="5"
Background="Black"
BorderThickness="0"
Foreground="White"
ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</Border>
</Grid>
</UserControl>
I have omitted the non-important things.
What I want to do:
Whenever the user clicks on the button, the console should collapse and look something like this:
The arrow is also changed.
How can I implement this? What is the best approach using MVVM?
What I have tried:
I have tried using a button click event handler in the code behind - CollapseBtn_Click, just to see what will happen:
private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}
Apparently it removes the user control and leaves a white background where it used to be.
Instead of setting the Visibility of the whole LoggingGrid to Hidden, you should set the Visibility of the LoggingList to Collapsed. (For the difference between Hidden and Collapsed, see here: Difference between Visibility.Collapsed and Visibility.Hidden).
Depending on your layout in the ShellWindow you probably have to adjust your row height configuration in the UserControl such that the collapsed LoggingGrid leads to a row with a height of zero.
Regarding MVVM the best approach would be to bind the Button to a bool property ConsoleVisible on your ViewModel such that clicking the button toggles the property between true and false. The styling of the button can be bound to the same property. For the LoggingList Visibility you could use a Binding with a BooleanToVisibilityConverter on the same property.
I would like to create a Hub with several HubSections via code. Each HubSection owns a single GridView so it look like every HubSection is a table (fullscreen) and I swipe left/right to view every table.
In my XAML page is only Hub the other stuff should be done by code. The HubSections should be created at runtime. For this I use a local settings storage to save some information about this, like how many HubSections etc.
Creating new HubSections is no problem but I'm stuck at adding a GridView to each HubSection because I don't understand the logic here. It looks like I have to add a DataTemplate and a GridView but my attempts all failed.
Note: each GridView has also it's own databinding from a Observable Collection.
So how to add a (?DataTemplate?) GridView with databinding to a HubSection ?
With a DataTemplate you build your layout. I have used in a Project following template to show a few data per day and create one Section for each day:
<Page.Resources>
<CollectionViewSource x:Name="HubViewModel"/>
<DataTemplate x:Key="DataTemplate">
<Grid Background="Transparent" Width="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" HorizontalAlignment="Center">
<TextBlock Text="{Binding SumShipmentsSA}" Style="{ThemeResource HeaderTextBlockStyle}" TextAlignment="Center" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubNat" Text="National" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsNationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubInt" Text="International" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsInternationalSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock x:Uid="SummaryHubCharter" Text="Charter" FontSize="10" Width="100" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBlock Text="{Binding CountShipmentsCharterSA}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
.
.
<Hub x:Name="MainHub" DataContext="{Binding Source={StaticResource HubViewModel}}" Margin="0,0,0,20"/>
In the Code page I used the following method to create to the Section:
private void AddHubSection(IEnumerable<DaySummary> list)
{
if (list != null)
{
list = list.OrderByDescending(x => x.Date);
foreach (var item in list)
{
if (item.Date.Date.Equals(DateTime.Now.Date))
{
continue;
}
HubSection hubSection = new HubSection();
TextBlock headerTextBlock = new TextBlock();
headerTextBlock.Text = item.Date.ToString("dddd dd.MMM");
headerTextBlock.FontSize = 15;
hubSection.Header = headerTextBlock;
hubSection.Margin = new Thickness(0);
object dataTemplate;
this.Resources.TryGetValue("DataTemplate", out dataTemplate);
hubSection.ContentTemplate = dataTemplate as DataTemplate;
hubSection.DataContext = item;
hubSection.DoubleTapped += HubSection_DoubleTapped;
MainHub.Sections.Add(hubSection);
}
}
}
I think the example can help you have fun while trying.
There is much of code. But problem is there:
I've got a Listbox with Control as DataTemplate:
<ListBox x:Name="UpcomingConcertsList" ItemsSource="{Binding UpcomingConcerts}" HorizontalAlignment="Left" Height="350" Margin="10,208,0,0" VerticalAlignment="Top" Width="370">
<ListBox.ItemTemplate>
<DataTemplate>
<Control MouseDoubleClick="UpcomingConcert_DoubleClick">
<Control.Template>
<ControlTemplate>
<Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="4" Width="320">
<Grid Margin="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2" Width="100" Height="75" Margin="6" Source="{Binding ImageURL}"/>
<StackPanel Grid.Column="1" Margin="2,6">
<TextBlock FontWeight="Bold" Text="{Binding Name}"/>
<TextBlock Text="{Binding Date, StringFormat={}{0:g}}"/>
<TextBlock Text="{Binding Bands, Converter={StaticResource BandsConverter}}"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Control.Template>
</Control>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And click event code behind:
private void Concert_DoubleClick(object sender, MouseButtonEventArgs e)
{
Control control = sender as Control;
Concert concert = control.DataContext as Concert;
ConcertView wndw = new ConcertView(concert.ConcertID);
wndw.Show();
}
And ConcertView window is opened but just under my MainWindow. wndw.Activate(), wndw.Focus() don't help.
I tried to do this.IsEnabled = false and wndw.Show() after this. Then my ConcertView was above MainWindow. But as this.IsEnabled comes to true, ConcertView suddenly goes under.
Is ther eany ideas?
But TopMost makes my window being over all the applications What do you mean by this? You're currently using an application and when you click a button, a new window is loaded. So you want the new window to be at topmost itself right?
You can set the Owner property of a window to set it's owner. ie the MainWindow. If you set this then the current window will be owner window.
Window ownedWindow = new Window();
ownedWindow.Owner = this;
ownedWindow.Show();
Now try setting the wndw.TopMost = true;and check if its working.
my problem here is I made a listbox inside the popup, and set the popup's staysopen=false. But each time popup box pops, I have to click something inside the popup(like select an element in listbox), then click outside the popup, and it will close automatically. If I don't click anything, and even if I click other elements outside the popup, the popup stays on. I need the popup closes without needing me to click any element inside it. What can I do? Here is the code, there are some other style link to this code but just some color style.
My control is when user click the textbox on the top of the popup box, the listbox pops. If user does nothing and click any place outside this element, the popup box closes. Thanks.
I can use the following code to get it done in silverlight. But seems like in wpf, it is not working anymore.
popupAncestor = FindHighestAncestor(this.ListBoxPopup);
if (popupAncestor == null)
{
return;
}
popupAncestor.AddHandler(System.Windows.Controls.Primitives.Popup.MouseLeftButtonDownEvent, (MouseButtonEventHandler)ClosePopup, true);
<Grid x:Name="MainGrid" Margin="0" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Margin="1,1,1,0" x:Name="TopBar" Visibility="Visible" Grid.Row="0" Height="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{StaticResource COL_BTN_LIGHT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="19"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox x:Name="TextBoxSearchItem" x:FieldModifier="private" HorizontalAlignment="Stretch" Grid.Column="0" VerticalAlignment="Stretch" BorderThickness="0,0,0,0" Background="Transparent" TextChanged="TextBoxSearchItem_TextChanged"></TextBox>
<ToggleButton x:Name="DropDownArrorButton" Grid.Column="1" Style="{StaticResource ComboBoxReadonlyToggleButton}"></ToggleButton>
<!--<TextBlock HorizontalAlignment="Center" Text="Search" Grid.ColumnSpan="2" TextBlock.FontStyle="Italic" Opacity="0.4" VerticalAlignment="Center"/>-->
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Stretch" x:Name="PopupGrid" Margin="0,1,0,0" >
<Popup x:Name="ListBoxPopup" StaysOpen="False" x:FieldModifier="private" IsOpen="{Binding ElementName=DropDownArrorButton, Path=IsChecked, Mode=TwoWay}"
AllowsTransparency="true" Margin="0" HorizontalAlignment="Stretch" Placement="Bottom"
PlacementTarget="{Binding ElementName=TopBar}" Opened="OnPopupOpened" Closed="OnPopupClosed"
HorizontalOffset="{Binding ElementName=PopupGrid, Path=Value, Mode=TwoWay}"
VerticalOffset="{Binding ElementName=PopupGrid, Path=Value, Mode=TwoWay}">
<ListBox x:Name="ListBoxContainer" Width="{Binding ElementName=MainGrid, Path=ActualWidth}"
HorizontalContentAlignment="Stretch" SelectionMode="Single" Height="200" Margin="0"
SelectionChanged="ListBoxContainer_SelectionChanged"
MouseDoubleClick="ListBoxContainer_MouseDoubleClick">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Border BorderBrush="{Binding SearchedBackColor}" BorderThickness="{Binding Indicator}" Width="{Binding ElementName=MainGrid, Path=ActualWidth}">
<TextBlock x:Name="ContentText" Text="{Binding Name}" Margin="1,0,0,0"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Popup>
<Border x:Name="listBorder" BorderBrush="{StaticResource COL_BTN}" BorderThickness="0,1,0,0" ></Border>
</Grid>
</Grid>
You should create a dependency property in your view model or control for "IsPopupOpen" as shown below to manage state of the popup. Then you can bind both the ToggleButton "IsChecked" and popup "IsOpen" to that DP.
Also on your ToggleButton, set "Focusable=false" and "IsThreeState=false"
public bool IsDropDownOpen
{
get { return (bool)GetValue(IsDropDownOpenProperty); }
set { SetValue(IsDropDownOpenProperty, value); }
}
public static readonly DependencyProperty IsDropDownOpenProperty =
DependencyProperty.Register("IsDropDownOpen", typeof(bool), typeof(Window), new UIPropertyMetadata(false));
Good luck!
PROBLEM:
I have a blank Image control named "Image1".
Now, I want to supply a Source to that Image at runtime base on the selected item on my ListBox (ListBoxSource).
How will I do that in "ListBoxSource_SelectionChanged(...)" event?
private void ListBoxSource_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
//...Some conditional statement in here which determines what image to set or update its Image source
this.Image1.Source = ??? What to supply in here
}
NOTE: I know how to do this using Binding BUT I know only using another ListBox to show my selected items. This time I use a Grid(2 rows and 2 columns: each cell has a blank Image control in it) for the purpose of supplying each grid cell with the ListBoxSource selected Image item.
OR Can I use some binding to this using Grid? My other purpose is also to be able to control the Image in different sizes (meaning some image will span rows/columns inside a Grid).
Here is my XAML:
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel>
<Image Source="{Binding FileFullName}" HorizontalAlignment="Left" Height="64" Width="64"/>
<TextBlock Text="{Binding FileName}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox x:Name="ListBoxSource" HorizontalAlignment="Left" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="29,31,0,31" Width="257" SelectionMode="Multiple" SelectionChanged="listBoxSource_SelectionChanged"/>
<Grid x:Name="GridImageHolder" Height="270" Margin="338,44,0,0" VerticalAlignment="Top" Background="#FFE0D6D6" ShowGridLines="True" DataContext="{Binding SelectedItem, ElementName=listBoxSource}" d:DataContext="{Binding Collection[0]}" HorizontalAlignment="Left" Width="539">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="140"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="267.883"/>
<ColumnDefinition Width="271.117"/>
</Grid.ColumnDefinitions>
<Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Margin="8,0.96,21.883,8"/>
<Image x:Name="Image2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Margin="19.975,0,0,8" Width="218"/>
<Image x:Name="Image3" Grid.Row="1" Grid.Column="0" Margin="8,21.04,40.883,16"/>
<Image x:Name="Image4" Grid.Row="1" Grid.Column="1" Margin="8,21.04,33.117,16" />
</Grid>
</Grid>
In the event you need to cast the sender to the appropriate class.