Develop Reference

How can I design a region settings like this in WPF

Till now I have a combo-box control which displays all the available region language in the UI as a combo-box items.
its in WPF and MVVM
<ComboBox
x:Name="cbLanguage"
Grid.Row="1"
Height="30"
Width="200"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ItemsSource="{Binding LocalLanguages,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedIndex="0">
But I saw this window and thought this looks much more legant and modern.
Can I do similar kind of window in WPF.
I tried to change the Combobox with list-box, List-view but no result.
Any help if there is any control in WPF which can do this.
This solves many problem specially if the combo box have more than 10 items user has to scroll through the all and then select the last index. But in this way user can select any locals as all are displayed in the UI. Even user can have the option to display alphabetically.

arraging items in 3 columns can be achieved by using UniformGrid as ItemsPanel
<ComboBox.ItemsPanel>
<ItemsPanelTemplate >
<UniformGrid Columns="3"/>
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
modify ItemTemplate to change items apperance and have green color for selected item
i think it is necessary to modify ComboBox template to have custom header and footer in a dropDown (Edit Template-Edit a Copy in Visual Studio designer)

In WPF combobox is basically a Popup when the toggle button is pressed.
You could implement your own popup or you could have a look at the template of the ComboBox. Here is a link to ComboBox template

Overwrite ListBoxitem?

I'm new to WPF and I have this ListBox which I want to instantiate with a specific ListBoxItem, so the user knows what to do with the ListBox.
<ListBox Name="DbListBox"
Grid.Column="3"
HorizontalAlignment="Left"
Height="246"
Margin="0,99,0,0"
Grid.Row="1"
VerticalAlignment="Top"
Width="211"
SelectionMode="Single"
SelectedItem="{Binding Path=selectedDB,Mode=TwoWay}"
AllowDrop="True"
Drop="DbListBox_Drop">
<ListBoxItem Name="ListBoxItem" FontStyle="Italic">Drag .db file here or add below</ListBoxItem>
</ListBox>
Then I have some code which adds a collection of items to the ItemsSource of this ListBox, but I can't do that since the ItemsSource is not empty
DbListBox.ItemsSource = DbCollection;
My question is, how can I start up the ListBox with the item inserted first, and then when DbCollection is added to it, it simply overwrites the first ListBoxItem?

When using WPF properly, we'd normally have something like this, where a collection property would be data bound to the ListBox.ItemsSource property:
<ListBox ItemsSource="{Binding SomeCollectionProperty}" />
Once we have this XAML, we don't need to touch the ListBox again, as we can add or remove items from the data bound collection and they will magically appear (or disappear) from the ListBox:
SomeCollectionProperty.Add(new SomeDataType());
SomeCollectionProperty.Remove(someItemFromCollection);
The SomeDataType used here is up to you... it depends on what you want to display in your items. If it was just a plain string for example, then you could simply do this to add your initial item into the collection:
SomeCollectionProperty.Add("Drag .db file here or add below");
If you wanted to make that item look different to the others then you'd need to data bind a custom class that has a Text property and FontStyle property for example. You could data bind these properties in a DataTemplate to design each item to be exactly as you want it. However, that's a completely different question.
To find out more about these things, you can read the Data Binding Overview and Data Templating Overview page on MSDN.

How to get rid of double selection thing in ListView (XAML)

I have a ListView and I bind to an ObservableCollection<Folder> and when I hover over a ListViewItem, there is a second selection thing appearing underneath (or ontop of) the item text which prevents me from being able to "activate" the selected item because it doesn't appear to be receiving my click.
As you can probably see, the structure is:
ListView > ItemTemplate > DataTemplate > ListViewItem. But I'm guessing I have that double-selection thing because there are basically 2 "item templates" (DataTemplate and ItemTemplate). But if I get rid of DataTemplate, it throws a runtime error. If I get rid of ItemTemplate, it throws an error. I can't win. How do I get rid of this thing?
Update:
This gives me the desired effect:
<StackPanel x:Name="folderContainer" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="175" Background="Khaki" Margin="0, 18, 0, 0">
<ListView x:Name="folderList" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Folder}" BorderBrush="{x:Null}" BorderThickness="0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="folderItem" Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>

With the ListViewItem you where including a specialized wrapper primarily used the ListView to contain unknown item(s) presented by the binding of the ItemsSource when there is default template used. It helps to show that unknown item on the screen, its the purpose of the ListViewItem. For example if someone bound a list of strings, the strings have no xaml style on hover, hence there needs to be a container control to achieve all things graphical in those situations.
Why the two Shadows?
The actual ListViewItem is at its heart (or actually its property), a content control containing what I surmise you had was a textbox control. That is now two controls thanks to the DataTemplate you provided.
Hence you had a wrapper, with a content containing a texbox control. So there are two things which take up space, one is the ListViewItem and the other is the textbox. By hovering over each item, each's style kicked off to show the padding of the control as a selectable region in the Zorder fashion whereas both are seen.
Nothing more nothing less.
Since you knew what is to go into the content control, there was no need to use the ListViewItem wrapper, it was redundant, and you used the actual textbox; hence with only it's style to show the padding of the single control on hover.

Get the children of the object present

I'm having a Grid and in that grid m having a scroll-able content and in that having a chartgrid
Xaml Code
<TabItem x:Name="Charts" Header=" Company Charts " TabIndex="0" IsSelected="True">
<ScrollViewer x:Name="ScrollViewerDN" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" Background="Transparent" telerik:StyleManager.Theme="Expression_Dark">
<Grid Name="OuterGridChart">
<Grid x:Name="ChartGrid" Margin="10" Background="Transparent" >
CS CODE
private void ExecuteExportSingleChartToPdf(object obj)
{
var values = ((System.Collections.Generic.List<object>)(obj)).ToList();
Grid grid1 = values[0] as Grid;
above ExecuteExportSingleChartToPdf is a delegate command for a button
I'm able to generate a image temporarily bt the issue is that only the current selected tab is generated as image
Wanna to have both the grid-> children (tabcontrol) -> grid
access the children
And the chart grid (tabcontrol) ..charts are displayed in row and coloumn, want to have the row wise image to be saved as one.

You can create an image from any Visual element (virtually all controls extend the Visual class) using just a few lines of code. Rather than repeat myself again, please refer to my answer to the How to take a screenshot of a WPF control? question to find out how to do that.
Now all you need to do is to rearrange your XAML so that you have all of your row controls in one control. Therefore, I would recommend that you define a new Grid control with however many columns that you need in your relevant Grid row... you can use the Grid.IsSharedSizeScope Attached Property to align the new Grid columns with any outer columns if need be.
Finally, just pass a reference to your new Grid to the code from the linked question and you will have an Image of your controls.

Why does my comboBox not allow me to add values to it?

I have this WinRT XAML:
<ComboBox x:Name="comboxGroupName" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Margin="4" Width="200" Height="36" HorizontalAlignment="Left" ></ComboBox>
When I click in it to enter a new value, though, it seems to convert itself into a readonly textbox (it loses its down arrow and disallows any typing into it). What do I need to do to allow adding values into the comboBox? Or do I need to use a separate TextBox to do that (I reckon so, but I'd like to avoid that if reasonably possible)?

It looks like your only option will be to use a seperate TextBox. There is an IsEditable property, but it states:
Gets a value that indicates whether the user can edit text in the text box portion of the ComboBox. This property always returns false.
and the ComboBox Page states:
You populate the ComboBox by adding objects directly to the Items collection or by binding the ItemsSource property to a data source. Items added to the ComboBox are wrapped in ComboBoxItem containers.