VPF::Непонятки при отображении информации в TreeView

mr.Anderson

Дата 24.7.2009, 01:07 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

На странице есть TreeView. Он заполняется с помощью одной из функций динамически. Все бы неплохо, но после заполнения я вижу вот такую картину:
user posted image

Т.е. надписи вылезают за пределы контрола... Эту проблему можно частично решить свойством NodeWrap=true, но это мне не подходит. Хотелось бы полосы прокрутки получить. И чтобы текст не вылазил за пределы, а нормально крутился с помощью полосок прокрутки.

--------------------

Lunatic2009

Дата 24.7.2009, 02:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 46
Регистрация: 1.7.2009

Репутация: 2
Всего: 3

Я предполагаю, что Вы размечали страницу div'ами. Тут не надписи вылетают за границы контрола, а контрол вылетает за границы div'a. Как вариант, для разметки можно использовать таблицу, или можно сделать так:

Код


<form id="form1" runat="server">
    <div style="width: 200px; float: left; border: solid 2px #000000;">
        <asp:Panel ID="Panel1" runat="server" ScrollBars="Both">
            <asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
                <Nodes>
                    <asp:TreeNode Text="Неопределенный интервал" Value="Неопределенный интервал">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Предел функции" Value="Предел функции">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Числовая последовательность и ее предел" Value="Числовая последовательность и ее предел">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </asp:Panel>
    </div>
    <div style="margin-left: 200px; border: solid 2px #000000;">
        &nbsp;
    </div>
</form>

Это сообщение отредактировал(а) Lunatic2009 - 24.7.2009, 03:07

mr.Anderson

Дата 24.7.2009, 10:53 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Предположение неправильное... Видите черную рамку на рисунке? Это и есть TreeView. Я специально ему рамку сделал, чтобы было видно, где он заканчивается. И верстка у меня табличная, так что он не вылезает никуда 100%.

--------------------

Lunatic2009

Дата 24.7.2009, 13:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 46
Регистрация: 1.7.2009

Репутация: 2
Всего: 3

Странно, как не пробовал, не могу добиться такого результата, может быть покажите код?

Попробовал сделать так:

Код


<form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Add" onclick="Button1_Click" />
    <table border="1" cellpadding="3" cellspacing="3" style="width: 100%;">
        <tr>
            <td style="width: 50px;">
                <asp:TreeView ID="TreeView1" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="Black">
                </asp:TreeView>
            </td>
            <td style="width: 100%;">
            </td>
        </tr>
    </table>
</form>

Код


protected void Button1_Click(object sender, EventArgs e)
{
    TreeNode treeNode = new TreeNode("Неопределенный интервал");
    treeNode.ChildNodes.Add(new TreeNode("test"));
    treeNode.ChildNodes.Add(new TreeNode("test"));
    treeNode.ChildNodes.Add(new TreeNode("test"));

    TreeNode treeNode2 = new TreeNode("Предел функции");
    treeNode2.ChildNodes.Add(new TreeNode("test"));
    treeNode2.ChildNodes.Add(new TreeNode("test"));
    treeNode2.ChildNodes.Add(new TreeNode("test"));

    TreeNode treeNode3 = new TreeNode("Числовая последовательность и ее предел");
    treeNode3.ChildNodes.Add(new TreeNode("test"));
    treeNode3.ChildNodes.Add(new TreeNode("test"));
    treeNode3.ChildNodes.Add(new TreeNode("test"));

    TreeView1.Nodes.Add(treeNode);
    TreeView1.Nodes.Add(treeNode2);
    TreeView1.Nodes.Add(treeNode3);
}

Вот что получается:

Это сообщение отредактировал(а) Lunatic2009 - 24.7.2009, 13:30

Присоединённый файл ( Кол-во скачиваний: 8 )

1.jpg 40,71 Kb

mr.Anderson

Дата 24.7.2009, 17:17 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

У вас на рисунке размер текста совпадает с размером самого контрола. Попробуйте уменьшить его ширину? Код сейчас приведу...

Фрагмент верстки:

Код


<table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" width="0" style="background-image: url('Images/LeftpartFill.jpg')">
                    <table width="100%" cellspacing="0" cellpadding="0">
                        <tr>
                            <td><asp:Image ImageUrl="Images/LeftpartTop.jpg" runat="server" /></td>
                            <td style="background-image: url('Images/ContentsLeftFill.jpg')"><asp:Image ImageUrl="Images/ContentsLeftFill.jpg" runat="server" /></td>
                        </tr>
                        <tr>
                            <td>
                              <!-- Вариант 1: панелька с изображением на заднем фоне и деревом на переднем плане -->
                              <asp:Panel Width="228" Height="300" ID="TreePanel" BackImageUrl="Images/LeftpartTreeFill.jpg" runat="server">                              
                                <asp:TreeView NodeStyle-ForeColor="Black" Font-Size="Smaller" Font-Names="Arial" CssClass="TVMargin" BorderColor="Gray" BorderWidth="1" Width="195" Height="298" ID="TVContents" BackColor="White" runat="server" />
                              </asp:Panel>
                              <!-- Вариант 2: изображение для неавторизованных пользователей -->
                              <asp:Image ID="Unautorized" ImageUrl="Images/Unautorized.jpg" runat="server" />
                            </td>
                            <td style="background-image: url('Images/ContentsLeftFill.jpg')"><asp:Image ImageUrl="Images/ContentsLeftFill.jpg" runat="server" /></td>
                        </tr>
                        <tr>
                            <td><asp:Image ImageUrl="Images/LeftpartBottom.jpg" runat="server" /></td>
                            <td style="background-image: url('Images/ContentsLeftFill.jpg')"><asp:Image ImageUrl="Images/ContentsLeftFill.jpg" runat="server" /></td>
                        </tr>
                    </table>
                </td>

Где находится TreeView - там комментарий стоит.

Отображается либо изображение, либо дерево, это контролируется кодом на Page_Load, он неважен. Заполняется динамически, как я уже говорил, просто ноды в него вбиваются и все. Но эффект такой, как у меня на скрине.

Это сообщение отредактировал(а) mr.Anderson - 24.7.2009, 17:25

--------------------

Lunatic2009

Дата 24.7.2009, 18:21 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 46
Регистрация: 1.7.2009

Репутация: 2
Всего: 3

Действительно, так и есть. Я в верстке не особо, но кое что получилось, теперь текст не вылетает за границы контрола, а так же есть прокрутка, привожу полный код страницы:

Код


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .TreeView1
        {
            display: inline-table;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
                <td style="vertical-align: top; width: 0px;">
                    <table border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
                        <tr>
                            <td style="width: 50px;">
                                <asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Width="195px">
                                    <asp:TreeView ID="TreeView1" runat="server" NodeStyle-ForeColor="Black" Font-Size="Smaller"
                                        Font-Names="Arial" BorderColor="Gray" BorderWidth="1px" Width="195px" Height="298px"
                                        BackColor="White" ShowLines="True" NodeIndent="10" CssClass="TreeView1">
                                        <Nodes>
                                            <asp:TreeNode Text="123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123"
                                                Value="New Node">
                                                <asp:TreeNode Text="New Node" Value="New Node">
                                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                                                </asp:TreeNode>
                                            </asp:TreeNode>
                                            <asp:TreeNode Text="123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123"
                                                Value="New Node">
                                                <asp:TreeNode Text="New Node" Value="New Node">
                                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                                                </asp:TreeNode>
                                            </asp:TreeNode>
                                            <asp:TreeNode Text="123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123"
                                                Value="New Node">
                                                <asp:TreeNode Text="New Node" Value="New Node">
                                                    <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                                                </asp:TreeNode>
                                            </asp:TreeNode>
                                        </Nodes>
                                        <NodeStyle ForeColor="Black" />
                                    </asp:TreeView>
                                </asp:Panel>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Это сообщение отредактировал(а) Lunatic2009 - 24.7.2009, 18:23

mr.Anderson

Дата 25.7.2009, 14:21 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Гм. Я попробовал, нечто похожее мне и было нужно... Спасиб... Может, еще другие варианты найду...

--------------------

mr.Anderson

Дата 27.7.2009, 20:06 (ссылка)

(нет голосов)

Загрузка ...

iOS Lead Developer

Профиль
Группа: Участник Клуба
Сообщений: 3374
Регистрация: 20.12.2004
Где: далеко

Репутация: нет
Всего: 128

Получилось с помощью вашего примера и еще одного приема... В основную панель, на которой находится фоновый рисунок, я вложил вторую, которой задал нужное смещение относительно первой, чтобы вписывалось в дизайн, этой второй панели и назначил полосы прокрутки. Спасибо за помощь!

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Разработка под ASP.NET \| Следующая тема »