I am searching for the "right" way of styling a textbox for showing read-only data.
Normal if you set a textbox to read-only the text somehow become dimed. What I would like is this
See that the data is read-only
Easily read the text
Be able to copy the text
Should be able to see the control if there is no data.
I could give the background or border another color but maybe I am missing out of something? is there a skilled designer out there (-:
For solve this problem you should use RichTextBox inside TextBlock.
Here is my sample of code read-only TextBlock with scrollbar, auto-wrapping and possibility to copy text >
<DockPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock IsEnabled="True" TextWrapping="Wrap" TextAlignment="Justify" HorizontalAlignment="Stretch">
<RichTextBox Background="Transparent" BorderThickness="0" IsDocumentEnabled="True" IsReadOnly="True" />
</TextBlock>
</ScrollViewer>
</DockPanel>
Related
If I put the Column where the toolbar is hosted to be very big (800) then all the text is visible:
but if I put a smaller column this happens:
But I cannot understand why:
<DataTemplate x:Key="IconFilterButton">
<StackPanel Orientation="Horizontal">
<TextBlock
VerticalAlignment="Center"
Style="{StaticResource LargeIconStyle}"
Text="{Binding}" />
<TextBlock
Margin="6,0,0,0"
VerticalAlignment="Center"
DataContext="{Binding}"
Style="{StaticResource BodyTextStyle}"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Tag}" />
</StackPanel>
</DataTemplate>
and here the definition
<ToggleButton
x:Name="DFilter"
Click="Filtering_Click"
Content=""
ContentTemplate="{StaticResource IconFilterButton}"
Tag="1d"
/>
<ToggleButton
x:Name="WFilter"
Click="Filtering_Click"
Content=""
ContentTemplate="{StaticResource IconFilterButton}"
Tag="1w"
/>
Even worst if I click on the button once they are out:
and then the text is visible but is wrong as the TextBlock is not considered in the object size:
The WPF ToolBar control uses a custom panel for the overflow Popup. In many styles, the ToolBarOverFlowPanel has a property WrapWidth set to a static value like 200. This determines how many items can be displayed before it wraps to another row in the popup.
I've created custom styling for this control and have found that the ToolBarOverFlowPanel used internally is buggy. That's probably the source of your problem.
You can re-template the ToolBar and wire-up a different value for WrapWidth to try to fix the issue, but my guess is that you'll still run into layout problems.
Otherwise, you might consider making your own replacement control.
I have an AvalonEdit on my window. When I press key combination Ctrl+Up or Ctrl+Down when inside editor, AvalonEdit loses focus, which is transferred to a different control, as below:
This sometimes happen as well when using Ctrl+Left or Ctrl+Right combinations.
My current XAML definition looks like following:
<ae:TextEditor x:Name="teEditor"
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="0"
FontFamily="Consolas"
FontSize="10pt"
TabIndex="0"
WordWrap="{Binding ElementName=Root, Path=Handler.WordWrap}"
ShowLineNumbers="{Binding ElementName=Root, Path=Handler.LineNumbers}"
ContextMenu="{StaticResource EditorContextMenu}"
GotFocus="HandleEditorGotFocus"
KeyboardNavigation.ControlTabNavigation="None"
KeyboardNavigation.AcceptsReturn="True"
KeyboardNavigation.DirectionalNavigation="None"
KeyboardNavigation.TabNavigation="None"/>
How can I prevent that?
It turns out, that problem appears, when you place AvalonEdit inside TabControl. In such case you have to disable keyboard navigation on the TabControl by adding:
KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained"
In a wpf user control I'm creating the end user has the option to alter the default size of the included images. When Originally designing the control I based my eventual margin sizes on trial and error, eventually settling on what looked right to me.
When image sizes were either 16 x 16 or 24 x 24 the overall look is reasonable;
but once you start to dramatically increase the image size to two textboxes and text block in the control get thrown out of sync with the images.
The xaml that I originally used for the text and text block is shown below (it also includes the find button in the middle of them but helps by showing how all buttons are defined).
<TextBox x:Name="Record" BorderThickness="0" Margin="6" ></TextBox>
<Button Background="#00000000" x:Name="Find" Height="Auto" Width="Auto"
ToolTip="Find the Record at this position." BorderThickness="0">
<StackPanel Margin="2" Orientation="Horizontal">
<Image Source="{Binding ImageFind, ElementName=DN}"
Width="{Binding ImageFindWidth, ElementName=DN}"
Height="{Binding ImageFindHeight, ElementName=DN}"/>
<TextBlock Margin="3" Text="{Binding TextFind,ElementName=DN}"/>
</StackPanel>
</Button>
<TextBlock Margin="6">of</TextBlock>
<TextBox x:Name="Records" BorderThickness="0"
Margin="6"
Text="{Binding RecordsCount, ElementName=DN}"></TextBox>
All of the buttons and text boxes are contained in a stack panel with horizontal orientation set.
What I would like to know if is there is a mathematical formula that I could apply to the textboxes and textblock at the time that the end user changes the width height of the images (they will always be the same in either dimension) that would correct the layout , thus centring the text in line with the middle of the images.
Possibly there is some other wpf layout trick about which I have yet to learn that does this sort of thing, either way I'd welcome suggestions.
Thanks
Set the VerticalAlignment property on the TextBlock and VerticalContentAlignment on the TextBox.
<TextBlock Margin="6" VerticalAlignment='Center'>of</TextBlock>
I want to make it so that my TabControl is vertically scrollable, but I can't seem to do it. The following sample acts as though there was no scrollviewer at all. I even tried putting the TabControl inside the scrollviewer, or putting it all in a grid and constraining the height of the grid, but nothing works.
<DataTemplate x:Key="tabControlTemplate">
<TabControl ItemsSource="{Binding guiItems}" DisplayMemberPath="Title" Height="Auto" Template="{StaticResource mainTabControlTemplateEx}">
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<StackPanel Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ItemsControl ItemsSource="{Binding guiItems }" ItemTemplateSelector="{DynamicResource templateSelector}"/>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</DataTemplate>
The actual problem is not clear from the question.
You are not getting to see scrollviewer and the content inside is clipped? PLease confirm if that is the case.
If the problem is you are getting to see entire content taking up all the available space, and you would like to control that using scroll viewer, then you would need to set 'MaxHeight' property on Scroll Viewer. This would limit the height of your DataTemplate and would make verticall scroll bar visible if the inner content goes beyond the MaxHeight.
Hope that helps.
I would like to display a popup above my control when the user 'mouse over', problem is that the contents of the popup is a ListBox that databinds so I do not know the size of the control (to set the margins), I have tried every event listed in intellisense on the popup but the ActualHeight of the popup is zero (want to subtract from Margin.Top), any ideas?
For this, I would recommend using a ToolTip. This way you can format the tool tip to show with a list box that is data bound. For example: A normal tooltip would look like:
<sdk:Label Content="{Binding SomeBinding}" Width="Auto" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ToolTipService.ToolTip>
<ToolTip Content="Some tool tip." Name="ttSomeToolTip"></ToolTip>
</ToolTipService.ToolTip>
</sdk:Label>
What I assume you're doing is this:
<sdk:Label Content="{Binding SomeToolTip}" Width="Auto" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ToolTipService.ToolTip>
<ToolTip Name="ttSomeToolTip">
<ListBox ItemsSource="{Binding MyListBoxSource}" SelectedItem="{Binding MySelectedListBoxItem,Mode=TwoWay}">
</ListBox>
</ToolTip>
</ToolTipService.ToolTip>
</sdk:Label>
I can't guarantee that this proposed solution will work, but you have one of two options: Target the LayoutUpdated event for the ToolTip and do a render transform matrix to resize the tool tip container. Theoretically, the tool tip should resize automatically. So if you're not already using the above mentioned approach, try that and see what happens.
You must run code via Dispatcher, then your code runs in UI thread and you have access to control size.
See here